All Components

Timeline Component with Glassmorphism

Timeline component with Glassmorphism style, responsive and with dark theme support

                <section class="dark:bg-gray-900 bg-gray-100 py-10">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10">Event Timeline</h2>
        <div class="flex flex-col md:flex-row justify-center items-center">
            <!-- Event 1 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: March 10, 2023</span>
                </div>
            </div>
            <!-- Event 2 -->
            <div class="flex flex-col items-center md:w-1/3 mb-8 md:mb-0 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                     <span class="text-sm text-gray-600 dark:text-gray-400">Date: April 15, 2023</span>
                </div>
            </div>
            <!-- Event 3 -->
            <div class="flex flex-col items-center md:w-1/3 relative">
                 <div class="w-32 h-32 rounded-full bg-gray-300 dark:bg-gray-700 mb-4 overflow-hidden">
                    <img class="w-full h-full object-cover" src="https://picsum.photos/200/300" alt="Event Image">
                </div>
                 <div class="absolute top-16 left-1/2 transform -translate-x-1/2 w-px h-16 bg-gray-400 dark:bg-gray-600 md:top-32 md:h-8"></div>
                <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 text-center shadow-lg w-full md:w-5/6">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Event Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <span class="text-sm text-gray-600 dark:text-gray-400">Date: May 20, 2023</span>
                </div>
            </div>
        </div>
    </div>
</section>

Social Components Component

Social Components Component with Brutalism design, responsive effects, and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-2xl font-bold font-mono">Social Feed</h2>
    <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
  </div>
  <div class="space-y-6">
    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">John Doe</p>
          <p class="text-sm font-mono">@johndoe</p>
        </div>
      </div>
      <p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
      <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 100</span>
        <span>Comments: 20</span>
      </div>
    </div>

    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">Jane Smith</p>
          <p class="text-sm font-mono">@janesmith</p>
        </div>
      </div>
      <p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 50</span>
        <span>Comments: 15</span>
      </div>
    </div>
  </div>
</div>

Activity Feed Component

A responsive activity feed component with a neumorphic design style, supporting both light and dark themes.

Open Preview

                <div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Activity Feed Component

A Brutalist-style Activity Feed Component with responsive design, high contrast layouts, and dark mode support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-4 max-w-md w-full">
    <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Activity Feed</h1>
    <div class="space-y-4">
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Posted a new article</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">10 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">15 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Brown</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your photo</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">30 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emma Wilson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">1 hour ago</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full h-32 object-cover rounded-md shadow-md" />
    </div>
</div>

Wishlist Component

A minimalist wishlist component featuring placeholder images and a dark theme.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-900 dark:text-white">My Wishlist</h2>
        <ul class="mt-4 space-y-4">
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

Skeuomorphic Container

A responsive container component with Skeuomorphism design and dark mode support using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-lg rounded-lg">
  <div class="bg-white dark:bg-gray-700 p-6 rounded-md shadow-inner">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Skeuomorphic Container</h2>
    <p class="text-gray-700 dark:text-gray-300">This is a container with a Skeuomorphic design, featuring a subtle shadow and rounded corners to mimic a physical object. It's also responsive and supports dark mode.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/seed/skeuomorphism/400/200" alt="Placeholder image" class="rounded-md shadow-md">
    </div>
  </div>
</div>

Brutalist Card Component

A brutalist card component with responsive design and dark mode support.

Open Preview

                <div class="bg-white dark:bg-black border border-black dark:border-white p-6 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] max-w-sm mx-auto">
  <img class="w-full h-48 object-cover border border-black dark:border-white mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Random image">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Brutalist Card Title</h2>
  <p class="text-black dark:text-white mb-4">This is a description for the brutalist card component, showcasing a raw and bold design approach.</p>
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full border border-black dark:border-white mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <span class="text-black dark:text-white">John Doe</span>
  </div>
  <button class="bg-black dark:bg-white text-white dark:text-black font-bold py-2 px-4 border border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white transition-colors duration-300">Read More</button>
</div>

Product Reviews Component

Product Reviews Component using Tailwind CSS with Neumorphism style, responsive effects, and dark theme support. No JavaScript code is included. Placeholder images and avatars are used.

Open Preview

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  body {
    background-color: #e0e0e0;
  }

  .neumorphism-card {
    background: #e0e0e0;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    border-radius: 12px;
  }

  .neumorphism-card-dark {
    background: #333;
    box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
    }

    .neumorphism-card {
      background: #333;
      box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
    }
  }
</style>

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card 1 -->
        <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"This product is amazing! It exceeded my expectations."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- John Doe</p>
        </div>

        <!-- Review Card 2 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Highly recommend this to everyone. Great quality and value."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                 <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Jane Smith</p>
        </div>

        <!-- Review Card 3 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Satisfied with my purchase. Will buy again."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Peter Jones</p>
        </div>

    </div>
</div>

Table of Contents Component

A responsive Table of Contents component designed for dark mode, featuring sections with titles and placeholders for images and avatars.

Open Preview

                <div class="bg-gray-900 text-white min-h-screen p-5">
    <h1 class="text-3xl font-bold mb-4">Table of Contents</h1>
    <ul class="space-y-4">
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 1</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 1 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 2</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 2 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 3</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 3 goes here. It can contain an overview or an introduction.</p>
        </li>
        <li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
                <h2 class="text-xl font-semibold">Section 4</h2>
            </div>
            <p class="mt-2 text-gray-400">Description for section 4 goes here. It can contain an overview or an introduction.</p>
        </li>
    </ul>
</div>

Success Messages Component

A simple and clean success message component with responsive design and dark mode support.

Open Preview

                <div class="flex items-center justify-between p-4 text-green-700 bg-green-100 rounded-lg dark:bg-green-700 dark:text-green-100" role="alert">
  <div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
    </svg>
    <p class="font-bold">Success!</p>
    <p class="ml-2 text-sm">Your action was successful.</p>
  </div>
  <button type="button" class="text-green-700 hover:text-green-900 dark:text-green-100 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

Categories