모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

브루탈리즘 그리드 레이아웃

반응형 그리드 레이아웃 구성 요소는 고대비, 특이한 레이아웃 및 어두운 테마 지원을 갖춘 브루탈리즘 디자인 스타일을 특징으로 합니다.

                <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 1</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a description for the first block. It's intentionally raw and bold.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 2</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a description for the second block. Explore the unusual layout!</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 3</h2>
                <p class="text-gray-700 dark:text-gray-300">A bold statement piece in the grid. Unconventional and striking.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 4</h2>
                <p class="text-gray-700 dark:text-gray-300">Another block to emphasize the raw beauty of brutalism.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 5</h2>
                <p class="text-gray-700 dark:text-gray-300">Each block tells a story through its design and layout.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-bold text-black dark:text-white">Brutalist Block 6</h2>
                <p class="text-gray-700 dark:text-gray-300">Exploring textures and contrasts in brutalist design.</p>
            </div>
        </div>
    </div>
</div>
<style>
    .dark .border-gray-300 { border-color: gray; }
    .dark .text-gray-700 { color: #e5e7eb; }
</style>

Heat Maps 구성 요소

Tailwind CSS로 스타일링된 반응형 히트 맵 구성 요소로, 자리 표시자 이미지와 아바타를 사용하여 마이크로 인터랙션 및 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="max-w-4xl mx-auto px-4 py-8">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=1" alt="Heat Map 1">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Population Density</h3>
        <p class="text-gray-600 dark:text-gray-400">Visual representation of population density across regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=2" alt="Heat Map 2">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Traffic Patterns</h3>
        <p class="text-gray-600 dark:text-gray-400">Analyzing traffic flow across different times of the day.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=3" alt="Heat Map 3">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Heatmap</h3>
        <p class="text-gray-600 dark:text-gray-400">Distribution of sales revenue across various regions.</p>
      </div>
    </div>
    <!-- Heat Map Item -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/400/200?random=4" alt="Heat Map 4">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
        <p class="text-gray-600 dark:text-gray-400">Tracking user interaction levels on the website.</p>
      </div>
    </div>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
    }
  }
</style>

Neumorphism Timeline 컴포넌트

Tailwind CSS를 사용하여 Neumorphism으로 스타일링된 반응형 타임라인 컴포넌트로, 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="w-full max-w-3xl space-y-8">
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 1</h2>
            <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=1" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 2</h2>
            <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=2" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 3</h2>
            <p class="text-gray-600 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=3" alt="Random Image" />
        </div>
    </div>
</div>

<style>
    @layer components {
        .shadow-neumorphism {
            box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2),
                        -8px -8px 15px rgba(255, 255, 255, 0.3);
        }
    }
</style>

참가 신청서

Tailwind CSS로 스타일링된 미니멀리스트 등록 양식 구성 요소로, 다크 모드와 반응형 디자인 기능을 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
    <form class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="name">Full Name</label>
            <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="John Doe" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
            <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
            <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 focus:outline-none focus:shadow-outline" placeholder="********" required />
        </div>
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 focus:ring focus:ring-blue-500" id="terms" required />
                <label for="terms" class="ml-2 block text-gray-700 dark:text-gray-300 text-sm">I accept the Terms and Conditions</label>
            </div>
        </div>
        <div class="mb-6">
            <button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:shadow-outline">Register</button>
        </div>
        <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a></p>
    </form>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Two-Factor Authentication 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 미니멀리스트 2단계 인증 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered email.</p>
        <div class="flex justify-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-gray-300" src="https://randomuser.me/api/portraits/men/5.jpg" alt="avatar">
        </div>
        <div class="mb-4">
            <input type="text" placeholder="Enter Code" class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        </div>
        <div class="flex justify-between items-center mb-4">
            <button class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-400 transition duration-300">Verify</button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">Didn't receive the code? <a href="#" class="text-blue-500 hover:underline">Resend</a></p>
        </div>
    </div>
</div>

제품 카드 구성 요소 52

어두운 테마를 지원하는 Glassmorphism 디자인 스타일과 Tailwind CSS를 활용하는 반응형 제품 카드 구성 요소입니다.

열다 미리 보기

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$49.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$59.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$39.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>

소셜 공유 버튼 구성 요소 51

스큐어모픽 디자인 원칙에 따라 설계된 반응형 소셜 공유 버튼 구성 요소로, 실제 객체를 모방하고 어두운 테마를 지원하는 버튼이 특징입니다. 구성 요소는 Tailwind CSS를 사용하여 스타일이 지정되며 picsum.photos의 자리 표시자 이미지와 randomuser.me 의 아바타를 포함합니다.

열다 미리 보기

                <div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>

채팅 창 구성 요소 50

Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원하는 미니멀한 채팅 창 구성 요소입니다. 여기에는 임의의 자리 표시자 소스의 자리 표시자 이미지와 아바타 이미지가 포함됩니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Chat with Us</h1>
        <button class="bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 p-2 rounded-full transition duration-150">
            <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"/>
            </svg>
        </button>
    </div>
    <div class="p-4 overflow-y-auto h-64">
        <div class="flex mb-4">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/300" alt="User Avatar" />
            <div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
                <p>Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex mb-4 justify-end">
            <div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
                <p>I have a question about my order.</p>
            </div>
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/301" alt="User Avatar" />
        </div>
        <div class="flex mb-4">
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/302" alt="User Avatar" />
            <div class="ml-3 bg-blue-500 text-white rounded-lg p-2 max-w-xs rounded-tr-none">
                <p>I can help you with that!</p>
            </div>
        </div>
        <div class="flex mb-4 justify-end">
            <div class="ml-3 bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-white rounded-lg p-2 max-w-xs rounded-tl-none">
                <p>When will it be delivered?</p>
            </div>
            <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/303" alt="User Avatar" />
        </div>
    </div>
    <div class="flex p-4 border-t border-gray-200 dark:border-gray-700">
        <input type="text" class="flex-grow border border-gray-300 dark:border-gray-600 p-2 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 focus:border-transparent" placeholder="Type your message..." />
        <button class="bg-blue-500 text-white p-2 rounded-lg ml-2 transition duration-150 hover:bg-blue-600">
            Send
        </button>
    </div>
</div>

열 구성 요소 49

실제 요소를 모방한 스큐어모픽 디자인의 반응형 Columns Component로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=1" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column One</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the first column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=2" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Two</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the second column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <div class="p-4">
                <img src="https://picsum.photos/300/200?random=3" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Three</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a sample text for the third column. It describes the content inside.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
                <span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
            </div>
        </div>
    </div>
</div>

배지 구성 요소 48

머티리얼 디자인 원칙에 따라 설계된 배지 구성요소로, Tailwind CSS를 사용하여 반응형 레이아웃과 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 dark:text-white">Badges</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 1</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 2</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 3</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 4</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 5</span>
        </div>
        <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-lg shadow transition duration-300 hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200 font-medium">Badge 6</span>
        </div>
    </div>
</div>

1 ... 234 235 236 237 238 ... 242

카테고리

모든 구성 요소