Columns

Columns Component

Responsive Columns Component with Dark Mode Support

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 1</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
      </div>
      <div class="absolute inset-0 border-4 border-blue-300 dark:border-blue-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 2</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
      </div>
      <div class="absolute inset-0 border-4 border-red-300 dark:border-red-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 3</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
      </div>
      <div class="absolute inset-0 border-4 border-green-300 dark:border-green-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
    </div>
  </div>
</div>

Columns Component for a Dashboard, featuring a 3D design with complementary colors. It includes three responsive columns with a simple layout, dark mode support, and uses Tailwind CSS for styling. No JavaScript is included.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

Columns Component

Responsive 3D-style grayscale columns for a portfolio page, with dark mode support.

Open Preview

                <section class="py-10 dark:bg-gray-900">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project one, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project two, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-6">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white">Project Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-400">A brief description of project three, highlighting its key features and technologies used.</p>
          <a href="#" class="mt-4 inline-block text-gray-800 dark:text-white hover:underline">View Project</a>
        </div>
      </div>
    </div>
  </div>
</section>

Columns Component

A responsive columns component designed for portfolio showcasing with dark mode support, using a grayscale color scheme and Tailwind CSS.

Open Preview

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-white text-center mb-8">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 1</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</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-700">
                <span class="ml-2 text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 2</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Jane Smith</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 3</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Alice Johnson</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 4</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Mark Brown</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=5" alt="Project 5" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 5</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Emma Williams</span>
            </div>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/400/300?random=6" alt="Project 6" class="w-full h-40 object-cover rounded-t-lg">
            <h3 class="text-xl font-semibold text-white mt-4">Project Title 6</h3>
            <p class="text-gray-400 mt-2">Brief description of the project goes here. Explaining the key features and technologies used.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-700">
                <span class="ml-2 text-gray-300">Oliver Davis</span>
            </div>
        </div>
    </div>
</div>

Columns Component

A Columns Component designed with Glassmorphism style, vibrant colors, and a simple layout, suitable for a dashboard.

Open Preview

                <div class="flex flex-col md:flex-row md:space-x-4 p-6 bg-gray-900 dark:bg-gray-800 rounded-lg backdrop-blur-lg border border-transparent border-gray-600">
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 1</h2>
        <img src="https://picsum.photos/200/100" alt="Image 1" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the first column. Use this space to display key metrics or important information.</p>
    </div>
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 2</h2>
        <img src="https://picsum.photos/200/100" alt="Image 2" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the second column. Provide insights, visualizations, or controls related to the data here.</p>
    </div>
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 3</h2>
        <img src="https://picsum.photos/200/100" alt="Image 3" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the third column. Summary or additional data visuals can fit nicely in this space.</p>
    </div>
</div>

Neumorphism Columns Component

Open Preview

                <div class="p-8">

    <!-- Light Mode Container -->
    <div class="neumorphism-container relative z-10 max-w-6xl mx-auto p-8 rounded-2xl shadow-neumorphism-light bg-gray-200 dark:bg-gray-800 dark:shadow-neumorphism-dark">

        <!-- Dark Mode Toggle - Simple Example -->
        <div class="absolute top-4 right-4">
            <button class="p-2 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707m-9.193 9.193l-.707.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
        </div>

        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">My Portfolio</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- Portfolio Item 1 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 1, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

            <!-- Portfolio Item 2 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 2, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

            <!-- Portfolio Item 3 -->
            <div class="neumorphism-item p-6 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="rounded-lg mb-4 shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of Project 3, highlighting key features and technologies used.</p>
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Learn More</a>
            </div>

        </div>

        <!-- About Section - Example -->
        <div class="neumorphism-item mt-12 p-8 rounded-xl shadow-neumorphism-light bg-gray-300 dark:bg-gray-700 dark:shadow-neumorphism-dark">
            <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">About Me</h3>
            <div class="flex flex-col md:flex-row items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="rounded-full w-24 h-24 mb-4 md:mb-0 md:mr-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
                <p class="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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

    </div>
</div>

<style>
ul,
li {
    list-style: unset
}

/* Base styles for Neumorphism */
.shadow-neumorphism-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #4b4b4b, -7px -7px 15px #333333;
}

.shadow-inner-neumorphism-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}

.shadow-inner-neumorphism-dark {
    box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
}

/* Adjustments for dark mode */
body.dark .neumorphism-container {
    background-color: #2d3748;
    /* dark gray */
    box-shadow: 7px 7px 15px #1a202c, -7px -7px 15px #3f4a59;
    /* dark mode shadows */
}

body.dark .neumorphism-item {
    background-color: #4a5568;
    /* darker gray */
    box-shadow: 7px 7px 15px #1a202c, -7px -7px 15px #3f4a59;
    /* dark mode shadows */
}
</style>

Columns Component

Responsive Columns Component with Dark Mode

Open Preview

                <div class="dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <div class="md:flex md:space-x-6">
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column One</h3>
          <p class="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>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Two</h3>
          <p class="dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Three</h3>
          <p class="dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Columns Component

A responsive Columns component designed for blogs or content consumption. It features a minimalist flat design with an analogous color scheme and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">Latest Articles</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 1</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 2</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 3</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=4" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 4</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=5" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 5</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=6" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 6</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
  </div>
</div>

Columns Component

A responsive columns component with small engaging animations, suitable for e-commerce with a dark theme.

Open Preview

                <div class="container mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 1</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
        </div>

        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/301?random=1" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 2</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            </div>
        </div>

        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/302?random=1" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 3</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
    </div>
</div>

Columns Component

A responsive Columns Component designed with Glassmorphism, using a Triadic color scheme for a Business/Corporate website. It features frosted glass-like translucent elements, blur effects, and is suitable for dark mode.

Open Preview

                <div class="flex flex-col lg:flex-row justify-between p-6 bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-lg shadow-lg space-y-6 lg:space-y-0 lg:space-x-6">
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any information relevant to your business.</p>
        <img src="https://picsum.photos/200/150?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Description for the second column goes here. You can elaborate on services or features.</p>
        <img src="https://picsum.photos/200/150?random=2" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
    <div class="flex-1 bg-white bg-opacity-30 rounded-lg backdrop-blur-md shadow-md p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Details for the third column. Include any additional content as needed.</p>
        <img src="https://picsum.photos/200/150?random=3" alt="Random Image" class="mt-4 rounded-lg shadow-md" />
    </div>
</div>

Categories