Block validation: Expected attribute `class` of value `wp-block-cgb-block-test-gutenberg-block

I’m trying to create a custom WordPress gutenberg block that allows me to edit the second a a paragraph.

I can create the block using this code and I can see content on the frontend of the site however the block crashes if I view the block to edit it.

The console gives the following error:

Block validation: Expected attribute class of value wp-block-cgb-block-test-gutenberg-block, saw text-blueGray-700 .

Block validation: Block validation failed for cgb/block-test-gutenberg-block ({name: ‘cgb/block-test-gutenberg-block’, icon: {…}, keywords: Array(3), attributes: {…}, providesContext: {…}, …}).

Content generated by save function…..

My code is:

attributes: {
    content: {
        type: 'array',
        source: 'html',
        selector: 'p',
    }
},


edit: ( { attributes, setAttributes, className, isSelected } ) => {
    

    function onChangeContentName ( content ) {
        setAttributes({content: content})
    }

    let content = attributes.content // To bind attribute link_text

    // Creates a <p class='wp-block-cgb-block-test-gutenberg-block'></p>.
    return (

        

            <h1
                class="mx-auto mb-8 text-2xl font-semibold leading-none tracking-tighter text-black lg:text-3xl title-font">
                Test Site</h1>
            <p class="mx-auto text-base font-medium leading-relaxed text-blueGray-700 ">
  recreate this whole icon box component as UI of your gutenberg block; displaying site's title as a header and sites tagline at the bottom below the 2nd paragraph. 
  the 2nd paragraph should be editable.</p>
        </div>
    </div>
    <div class="w-full lg:w-1/3">
        <div class="h-full p-4 space-y-4 lg:rounded-r-xl rounded-b-xl lg:p-8 bg-blueGray-50">
            
                <RichText
                    tagName="p"
                    className={className} // Automatic class: gutenberg-blocks-sample-block-editable
                    onChange={onChangeContentName} // onChange event callback
                    value={content} // Binding
                    placeholder="Lorem impsum write your content..."
                />
            
            <h2 class="text-xs font-semibold tracking-widest text-black uppercase title-font"> Just another WordPress site
            </h2>
        </div>
        <div>
        </div>
    </div>
</div>

save: ( { attributes } ) => {
    
    return (

        <section class="text-blueGray-700 ">
<div class="container items-center px-5 py-8 mx-auto">
    <div class="flex flex-wrap justify-center mb-12 divide-y-2 lg:divide-y-0 lg:divide-x-2">
        <div class="w-full lg:w-1/3">
            <div class="p-4 rounded-t-xl lg:rounded-l-xl lg:p-8 bg-blueGray-50">
                <div
                    class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto mb-5 text-black bg-blueGray-100 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon icon-tabler icon-tabler-aperture"
                        width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                        fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <circle cx="12" cy="12" r="9"></circle>
                        <line x1="3.6" y1="15" x2="14.15" y2="15"></line>
                        <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(72 12 12)"></line>
                        <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(144 12 12)"></line>
                        <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(216 12 12)"></line>
                        <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(288 12 12)"></line>
                    </svg>
                </div>
                <h3 class="mb-4 text-xs font-semibold tracking-widest text-black uppercase title-font">test Option 2
                </h3>

                <h1
                    class="mx-auto mb-8 text-2xl font-semibold leading-none tracking-tighter text-black lg:text-3xl title-font">
                    Test Site</h1>
                <p class="mx-auto text-base font-medium leading-relaxed text-blueGray-700 ">
      recreate this whole icon box component as UI of your gutenberg block; displaying site's title as a header and sites tagline at the bottom below the 2nd paragraph. 
      the 2nd paragraph should be editable.</p>
            </div>
        </div>
        <div class="w-full lg:w-1/3">
            <div class="h-full p-4 space-y-4 lg:rounded-r-xl rounded-b-xl lg:p-8 bg-blueGray-50">
                
                    <RichText.Content tagName="p" value={ attributes.content } />
                
                <h2 class="text-xs font-semibold tracking-widest text-black uppercase title-font"> Just another WordPress site
                </h2>
            </div>
            <div>
            </div>
        </div>
    </div>
</div>

    );
}