<div class="container mx-auto p-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 1. Creating Buttons -->
        <div>
            <p class="my-4">1. Creating Buttons</p>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Primary Button
            </button>
        </div>

        <!-- 2. Using Flexbox -->
        <div>
            <p class="my-4">2. Using Flexbox</p>
            <div class="flex justify-center items-center bg-gray-100">
                <div class="flex-1 bg-green-200 p-2">Item 1</div>
                <div class="flex-1 bg-blue-200 p-2">Item 2</div>
            </div>
        </div>

        <!-- 3. Adding Shadows -->
        <div>
            <p class="my-4">3. Adding Shadows</p>
            <div class="shadow-lg p-4">
                Box with Large Shadow
            </div>
        </div>

        <!-- 4. Working with Grids -->
        <div>
            <p class="my-4">4. Working with Grids</p>
            <div class="grid grid-cols-3 gap-4">
                <div class="bg-red-200 p-2">Column 1</div>
                <div class="bg-yellow-200 p-2">Column 2</div>
                <div class="bg-green-200 p-2">Column 3</div>
            </div>
        </div>

        <!-- 5. Controlling Text Alignment and Style -->
        <div>
            <p class="my-4">5. Controlling Text Alignment and Style</p>
            <p class="text-center text-lg text-blue-700 italic">
                Centered and Italicized Text
            </p>
        </div>

        <!-- 6. Implementing Border and Radius -->
        <div>
            <p class="my-4">6. Implementing Border and Radius</p>
            <div class="border-4 border-blue-500 rounded-full p-4">
                Rounded Border
            </div>
        </div>
    </div>