All Components

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 p-6 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-8 w-full max-w-4xl border border-gray-200 dark:bg-gray-800 dark:bg-opacity-60 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Filters</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Category</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>All</option>
                    <option>Analytics</option>
                    <option>Marketing</option>
                    <option>Sales</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Status</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Date Range</label>
                <div class="flex space-x-2">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                </div>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Search</label>
                <input type="text" placeholder="Search..." class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
            </div>
        </div>
        <div class="flex justify-between items-center mt-6">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md dark:bg-blue-500 dark:hover:bg-blue-600">Apply</button>
            <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md dark:bg-gray-600 dark:hover:bg-gray-700">Reset</button>
        </div>
    </div>
</div>
              

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-extrabold text-white mb-4">Oops! Something went wrong.</h2>
    <p class="text-lg text-gray-300 mb-6">We're sorry, but it seems there was an error processing your request. Please try again later.</p>
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 italic">Your Friendly Bot</span>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Error Illustration">
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Retry</button>
    <button class="mt-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded transition duration-300 ease-in-out">Contact Support</button>
</div>
              

                <div class="container mx-auto p-4 md:p-8 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black rounded-lg shadow-xl">
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <h2 class="text-xl font-bold text-white dark:text-gray-200">User Profile</h2>
    </div>
    <button class="px-4 py-2 bg-white bg-opacity-20 text-white text-sm font-semibold rounded-full hover:bg-opacity-30 transition-all duration-300 ease-in-out">Follow</button>
  </div>

  <p class="text-white dark:text-gray-300 leading-relaxed mb-6">
    This is a sample container component for social media interfaces. It features vibrant colors, subtle hover effects for buttons, and is fully responsive.
  </p>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
      <h3 class="text-lg font-semibold text-white mb-2">Recent Post</h3>
      <p class="text-white text-sm dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    </div>
    <div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
      <h3 class="text-lg font-semibold text-white mb-2">Notifications</h3>
      <p class="text-white text-sm dark:text-gray-300">You have 3 new notifications. ...</p>
    </div>
  </div>

  <div class="mt-6 pt-4 border-t border-white border-opacity-20 flex justify-around text-white">
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Messages</a>
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Settings</a>
    <a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Logout</a>
  </div>
</div>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>
              

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Categories</h2>
    <nav class="relative mt-4">
        <ul class="flex space-x-6">
            <li class="group relative">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 1</a>
                <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
                    <div class="p-4 space-y-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-1</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-2</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-3</a>
                    </div>
                </div>
            </li>
            <li class="group relative">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 2</a>
                <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
                    <div class="p-4 space-y-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-1</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-2</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-3</a>
                    </div>
                </div>
            </li>
            <li class="group relative">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 3</a>
                <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
                    <div class="p-4 space-y-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-1</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-2</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-3</a>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Featured Posts</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Featured Post" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h4>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Featured Post" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h4>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Authors</h3>
        <div class="flex space-x-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
                <span class="text-gray-800 dark:text-gray-200">Author 1</span>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
                <span class="text-gray-800 dark:text-gray-200">Author 2</span>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author" class="w-10 h-10 rounded-full">
                <span class="text-gray-800 dark:text-gray-200">Author 3</span>
            </div>
        </div>
    </div>
</div>
              

                <div class="bg-pastel-light dark:bg-pastel-dark p-8 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="name">Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Name" />
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Email" />
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="message">Message</label>
            <textarea id="message" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline" placeholder="Your Message" rows="4"></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-600 dark:text-gray-400 text-sm font-bold mb-2" for="service">Service Inquiry</label>
            <select id="service" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline">
                <option value="consulting">Consulting</option>
                <option value="design">Design</option>
                <option value="development">Development</option>
            </select>
        </div>
        <div class="mb-6 flex items-center justify-between">
            <label class="inline-flex items-center">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400" />
                <span class="ml-2 text-gray-600 dark:text-gray-400 text-sm">Subscribe to our newsletter</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button type="submit" class="bg-pastel-primary dark:bg-pastel-secondary hover:bg-pastel-secondary dark:hover:bg-pastel-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Send
            </button>
        </div>
    </form>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/seed/picsum/200/100" alt="Random Image" class="rounded-lg" />
    </div>
</div>
              

                <nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800 dark:text-white">
            RetroSocial
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
        </div>
        <button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
            Menu
        </button>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
    </div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
    <h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
    <p class="text-gray-600 dark:text-gray-300 mt-2">
        Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
    </p>
    <div class="mt-4 flex space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
    </div>
</div>
              

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Filter Content</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Categories</h3>
      <div class="space-y-3">
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-blue-500 dark:text-blue-400">
          Technology
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-red-500 dark:text-red-400">
          Travel
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-green-500 dark:text-green-400">
          Food
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-yellow-500 dark:text-yellow-400">
          Lifestyle
        </label>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Tags</h3>
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-full text-sm">AI</span>
        <span class="px-3 py-1 bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full text-sm">Adventure</span>
        <span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-full text-sm">Recipes</span>
        <span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">Minimalism</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Date Range</h3>
      <div class="space-y-4">
        <div>
          <label for="start-date" class="block text-gray-600 dark:text-gray-300 mb-2">Start Date</label>
          <input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
        <div>
          <label for="end-date" class="block text-gray-600 dark:text-gray-300 mb-2">End Date</label>
          <input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center">
    <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full shadow-lg transform transition duration-300 hover:scale-110">Apply Filters</button>
  </div>
</div>
              

                <div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
        <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
          Register
        </button>
      </div>
    </form>
  </div>
</div>
              

                <section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center max-w-screen-lg">
        <div class="flex items-center justify-center w-full h-auto">
            <div class="w-full h-full carousel">
                <div class="carousel-inner">
                    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label for="carousel-3" class="carousel-control prev control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control next control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control prev control-2">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-3" class="carousel-control next control-2">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control prev control-3">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control next control-3">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                </div>
            </div>
        </div>
    </div>
  <style>
    .carousel-open:checked + .carousel-item {
      position: static;
      opacity: 100;
    }

    .carousel-item {
      -webkit-transition: opacity 0.6s ease-out;
      transition: opacity 0.6s ease-out;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .carousel-open:checked ~ .carousel-item:not(.carousel-item) {
      opacity: 0;
    }


    .carousel-open:checked ~ .control-1,
    .carousel-open:checked ~ .control-2,
    .carousel-open:checked ~ .control-3 {
      display: flex;
    }

    .carousel-control {
      z-index: 1;      
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10%;
      cursor: pointer;
      opacity: 50%;
      transition: opacity 150ms ease-in-out;
    }


    .carousel-control:hover {
      opacity: 100%;
    }

    .control-1,
    .control-2,
    .control-3 {
      width: 5vh;
      height: 5vh;
      border-radius: 50%;
      position: absolute;
    }
  
     .control-1 {
        top: 45%;
        left: 5%;
      }

      .control-2 {
        top: 45%;
        right: 5%;
      }
  
      .control-3 {
        top: 45%;
        left: 5%;
    }
  </style>
</section>