搜索组件

类别

组件列

列

多列内容布局

列组件

支持深色模式的响应式列组件

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

列组件

Dashboard 的列组件，具有互补色的 3D 设计。它包括三个具有简单布局的响应式列，支持深色模式，并使用 Tailwind CSS 进行样式设置。不包含 JavaScript。

打开预览

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

列组件

产品组合页面的响应式 3D 样式灰度列，支持深色模式。

打开预览

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

列组件

一个响应式列组件，专为支持深色模式的作品集展示而设计，使用灰度配色方案和 Tailwind CSS。

打开预览

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

列组件

列组件采用 Glassmorphism 风格、鲜艳的色彩和简单的布局设计，适用于仪表板。

打开预览

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

拟物 Columns 组件

新拟态列组件

打开预览

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

列组件

支持深色模式的响应式列组件

打开预览

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

列组件

一个响应式列组件，专为博客或内容消费而设计。它具有简约的平面设计和类似的色彩方案，并支持深色主题。

打开预览

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

列组件

一个响应式列组件，带有小型互动动画，适合具有深色主题的电子商务。

打开预览

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

列组件

一个响应式列组件，采用玻璃形态设计，使用三元色彩方案，适用于商业/企业网站。它具有磨砂玻璃般的半透明元素、模糊效果，并适合暗模式。

打开预览

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