All Components

Retro Blog Dropdown Menu

A responsive retro-vintage dropdown menu for blog content. Features a simple triadic color scheme and dark mode support using Tailwind CSS. No JavaScript.

Open Preview

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
    </div>
  </div>
</div>

A video player component designed with glassmorphism, featuring a frosted glass-like effect with complementary colors. It is interactive and responsive, suitable for blog content consumption with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
        <video class="w-full rounded-lg" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="mt-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
        </div>
        <div class="flex items-center mt-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
            </div>
        </div>
    </div>
</div>

Material Design Business Header

Material Design inspired simple header component with complementary color scheme for business websites. Responsive design with dark theme support.

Open Preview

                <header class="bg-blue-500 text-white py-4 shadow-md dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-xl font-bold">Business Name</div>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Home</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">About</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Services</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

Skip to Content Link Component

A web component that provides a link to skip to the main content, styled in Material Design with a pastel color scheme, suitable for e-commerce websites. It features a responsive design with dark theme support.

Open Preview

                <nav class="bg-pastel-200 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
    <div class="flex justify-between items-center">
        <a href="#main-content" class="text-pastel-800 dark:text-white font-medium text-lg hover:text-pastel-600 dark:hover:text-gray-300 transition duration-300 ease-in-out">
            Skip to Content
        </a>
    </div>
</nav>

<main id="main-content" class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-md mt-4">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to Our E-commerce Store</h1>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-4">
        <div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-lg">
            <h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 1</h2>
            <p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
            <button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
        </div>
        <div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-lg">
            <h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 2</h2>
            <p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
            <button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
        </div>
        <div class="bg-pastel-300 dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-lg">
            <h2 class="mt-2 text-xl text-gray-800 dark:text-white">Product 3</h2>
            <p class="text-gray-600 dark:text-gray-300">Description of the product goes here.</p>
            <button class="mt-2 w-full bg-pastel-500 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 rounded-lg hover:bg-pastel-600 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Add to Cart</button>
        </div>
    </div>
</main>

Maps Component

A complex maps component designed in Material Design style, suitable for dashboards. It integrates responsive elements, interactive features, and supports dark mode aesthetics using an analogous color scheme.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=1" alt="Map 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">City Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Interactive city map visualization.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=2" alt="Map 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Terrain Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Detailed terrain mapping for analysis.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=3" alt="Map 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Traffic Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Real-time traffic data and analytics.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=4" alt="Map 4" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Weather Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Interactive weather visualization.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=5" alt="Map 5" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Population Density Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Visual representation of population spread.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=6" alt="Map 6" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Resource Distribution Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Distribution of various resources across the region.</p>
            </div>
        </div>
    </div>
</div>

Timeline Component

A responsive timeline component with dark theme support, built with Tailwind CSS. It displays a series of events with dates, titles, and descriptions, suitable for a dashboard.

Open Preview

                <div class="container mx-auto px-4 py-8">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-8 text-center">Project Timeline</h2>

  <div class="relative wrap overflow-hidden p-10 h-full">
    <div class="border-2-2 absolute border-opacity-20 border-gray-700 dark:border-gray-200 h-full border" style="left: 50%;"></div>

    <!-- right timeline -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-blue-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Phase 1: Planning</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Initial project scope definition, requirements gathering, and resource allocation.</p>
      </div>
    </div>

    <!-- left timeline -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-green-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Phase 2: Development</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Building the core features and functionalities based on the defined requirements.</p>
      </div>
    </div>
    
    <!-- right timeline -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-yellow-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Phase 3: Testing</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Comprehensive testing to identify and fix bugs and ensure quality.</p>
      </div>
    </div>

    <!-- left timeline -->
    <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-red-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Phase 4: Deployment</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Releasing the project to the production environment.</p>
      </div>
    </div>

    <!-- right timeline -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="z-20 flex items-center order-1 bg-purple-600 shadow-xl w-8 h-8 rounded-full"></div>
      <div class="order-1 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-xl w-5/12 px-6 py-4">
        <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Phase 5: Maintenance</h3>
        <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Ongoing support, updates, and bug fixes.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .left-timeline .z-20:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(243 244 246);
    right: -10px;
  }

  .dark .left-timeline .z-20:after {
     border-left: 10px solid rgb(55 65 81);
  }

  .right-timeline .z-20:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(243 244 246);
    left: -10px;
  }

   .dark .right-timeline .z-20:after {
     border-right: 10px solid rgb(55 65 81);
  }
</style>

Alert Messages Component

A brutalist-style alert messages component with a pastel color scheme, designed for business/corporate websites and responsive with dark theme support.

Open Preview

                <div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
    <!-- Alert Message Header -->
    <h2 class="text-2xl font-bold">Alert Messages</h2>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">John Doe</span>
            <p>This is an informational alert message to notify you about updates.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Jane Smith</span>
            <p>This is a warning alert message to notify you about potential issues.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Alex Johnson</span>
            <p>This is a success alert message to confirm your action.</p>
        </div>
    </div>
</div>

Image Lightbox Component

A responsive Image Lightbox component designed for e-commerce, featuring dark mode support and an earth tones color scheme.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
    <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</button>
        <img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
        <div class="p-4">
            <div class="flex items-center space-x-3">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="text-white">
                    <p class="text-sm font-semibold">John Doe</p>
                    <p class="text-xs text-gray-400">E-commerce Store</p>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
        </div>
    </div>
</div>

<div class="flex justify-center py-6">
    <button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        Open Lightbox
    </button>
</div>

Feedback Component

A responsive feedback component designed for social networking interfaces, incorporating 3D design elements in a grayscale color scheme with dark mode support, tailored for medium complexity and interactivity.

Open Preview

                <div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
            <p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        This is an example feedback message where users can share their thoughts about the platform and engage with the community.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
            <p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>

Layout Components Component

A responsive web component layout following Material Design principles for a social media application with dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Social Media Layout</h2>
    <div class="grid grid-cols-1 gap-4">
        <!-- Profile Header -->
        <div class="flex items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <!-- Post Content -->
        <div class="p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
            <p class="text-gray-800 dark:text-gray-200 mb-2">This is a simple post layout demonstrating the use of Material Design principles.</p>
            <img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-auto rounded-lg">
        </div>
        <!-- Action Buttons -->
        <div class="flex justify-around mt-4">
            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700">Comment</button>
            <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700">Share</button>
        </div>
    </div>
</div>

Categories

Retro Blog Dropdown Menu

Video Player Component

Material Design Business Header

Skip to Content Link Component

Maps Component

Timeline Component

Alert Messages Component

Image Lightbox Component

Feedback Component

Layout Components Component