Container

Container Component

A responsive dark mode container for blog content with a simple grayscale design.

                <div class="container mx-auto p-4 dark:bg-gray-900 bg-white text-gray-800 dark:text-gray-200 rounded-lg shadow-lg">
  <h1 class="text-2xl font-bold mb-4 text-center">Blog Post Title</h1>
  <img src="https://picsum.photos/seed/unsplash/800/400" alt="Blog Post Image" class="w-full h-auto rounded-md mb-4">
  <div class="prose dark:prose-invert max-w-none">
    <p>This is an example of a blog post content paragraph within the container. It demonstrates a simple layout for reading and content consumption in dark mode.</p>
    <p>The container is designed to be responsive and uses Tailwind CSS classes for styling, including dark mode support with the <code class="language-text">dark:</code> prefix.</p>
    <p>Grayscale colors are used for a clean and minimalist look.</p>
  </div>
</div>

Container Component

A 3D styled container component suitable for business/corporate websites, featuring vibrant colors and interactive elements, and responsive design with dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition-transform duration-300 hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-vibrant-600 shadow-md">
        <h2 class="text-xl font-bold text-vibrant-600 dark:text-vibrant-300 ml-4">Business Name</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-4">This container is designed to showcase important information while maintaining a 3D effect that engages users.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature One</h3>
            <p class="text-white">Description of feature one with engaging content.</p>
        </div>
        <div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
            <img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="w-full h-auto rounded-md mb-2">
            <h3 class="font-semibold text-white">Feature Two</h3>
            <p class="text-white">Description of feature two with engaging content.</p>
        </div>
    </div>
</div>

Container Component

A Container Component designed in a Brutalist style for e-commerce, featuring a responsive layout with dark theme support, using Tailwind CSS.

Open Preview

                <div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
    <div class="flex flex-wrap gap-4">
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
        <div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
            <img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
            <h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
            <p class="text-white">This is a brief description of the product. It's bold and raw.</p>
            <button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
        </div>
    </div>
    <footer class="text-center mt-4 text-gray-400">
        <p>© 2023 E-commerce Store</p>
    </footer>
</div>

Glassmorphism Portfolio Container

A responsive Glassmorphism Container Component with dark mode support tailored for a portfolio website using Tailwind CSS. It features a frosted glass effect, a triadic color scheme, multiple interactive elements, and uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="container mx-auto p-8">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Title</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Name</a>
        <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4">
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag1</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tag2</span>
          <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tag3</span>
        </div>
        <div class="mt-6 flex items-center">
          <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">Developer</p>
          </div>
        </div>
        <div class="mt-6">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
          <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
        </div>
      </div>
    </div>
  </div>

    <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mt-8">
      <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/another/400/300" alt="Project Image">
        </div>
        <div class="p-8">
          <div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Another Project</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Name</a>
          <p class="mt-2 text-gray-600 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="mt-4">
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagA</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2">#tagB</span>
            <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200">#tagC</span>
          </div>
          <div class="mt-6 flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
          <div class="mt-6">
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full mr-2">View Project</button>
            <button class="bg-transparent hover:bg-gray-500 text-gray-700 dark:text-gray-300 font-semibold hover:text-white py-2 px-4 border border-gray-500 hover:border-transparent rounded-full">Learn More</button>
          </div>
        </div>
      </div>
    </div>
</div>

Brutalist Container Component

A simple but bold container component designed with a brutalist style and vibrant color scheme, suitable for business or corporate websites, supporting dark mode using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4">
    <div class="bg-yellow-400 dark:bg-yellow-600 border-4 border-red-800 dark:border-red-500 rounded-lg shadow-xl p-6">
        <h1 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4">Business Title</h1>
        <p class="text-base text-gray-800 dark:text-gray-200 mb-6">This is a simple yet bold container designed for a business or corporate website. The design embraces a brutalist style with vibrant colors.</p>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="w-full h-auto rounded-lg mb-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-blue-900 dark:border-blue-200 mr-2">
            <div class="text-sm">
                <p class="font-bold text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-700 dark:text-gray-300">CEO, Company Name</p>
            </div>
        </div>
    </div>
</div>

Container Component

A simple, responsive dashboard container with engaging microinteractions and a dark theme, focusing on analogous colors.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-blue-700 dark:text-blue-300">User Profile</span>
            </div>
            <img src="https://picsum.photos/300/200?random=1" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-green-700 dark:text-green-300">Analytics</span>
            </div>
            <img src="https://picsum.photos/300/200?random=2" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-red-700 dark:text-red-300">Notifications</span>
            </div>
            <img src="https://picsum.photos/300/200?random=3" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-yellow-700 dark:text-yellow-300">Settings</span>
            </div>
            <img src="https://picsum.photos/300/200?random=4" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
    </div>
</div>

Social Media Container

A responsive container component with vibrant colors, engaging microinteractions, and dark theme support, suitable for social media interfaces. Features include subtle hover effects, and a clean layout.

Open Preview

                <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>

Container Component

Responsive container component with dark mode support for e-commerce

Open Preview

                <div class="container mx-auto p-4 bg-gray-900 text-gray-100">
  <div class="dark:bg-gray-800 rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-4 dark:text-gray-200">Product Listing</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 1</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$19.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 2</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$29.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 3</h3>
          <p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-green-500">$39.99</span>
            <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Container Component

A retro/vintage styled container component for portfolios, with a monochromatic color scheme and dark mode support.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h1 class="text-4xl font-bold text-gray-100 dark:text-gray-200 mb-4">My Portfolio</h1>
    <p class="text-gray-300 dark:text-gray-400 mb-6">Showcasing my work from the nostalgic eras of the 80s and 90s.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 1</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 1 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 2</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 2 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 3</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 3 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 4</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 4 with a brief overview of the key elements and technologies used.</p>
        </div>
    </div>

    <div class="mt-10 text-center">
        <h3 class="text-3xl font-bold text-gray-200 dark:text-gray-300 mb-4">About Me</h3>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-32 h-32 mx-auto mb-4">
        <p class="text-gray-300 dark:text-gray-400 max-w-md mx-auto">I'm a passionate developer with a love for retro designs and a knack for turning ideas into reality. Let's connect!</p>
    </div>
</div>

Container Component

A simple responsive container component for blog/content consumption with microinteractions and dark theme support using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
        <h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
            </div>
        </div>
    </div>
</div>

Categories