모든 구성 요소

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

Heat Maps 구성 요소

히트 맵 컴포넌트(Heat Maps Component)는 어스 톤을 특징으로 하는 glassmorphism 스타일로 디자인되었습니다. 레이아웃은 단순하고 비즈니스/기업용 기본 요소로 구성되며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
    <div class="max-w-lg w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-md bg-opacity-50 p-6">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Heat Map Visualization</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-6">Analyze your data trends with our intuitive heat maps.
        Explore insights in a visually appealing format using earth tones inspired by nature.</p>
        <div class="grid grid-cols-2 gap-4">
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region A</h3>
                <img src="https://picsum.photos/200/150?random=1" alt="Heat Map Region A" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region B</h3>
                <img src="https://picsum.photos/200/150?random=2" alt="Heat Map Region B" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region C</h3>
                <img src="https://picsum.photos/200/150?random=3" alt="Heat Map Region C" class="w-full h-auto rounded-lg">
            </div>
            <div class="p-4 border border-gray-300 dark:border-gray-700 rounded-lg">
                <h3 class="font-medium text-gray-700 dark:text-gray-100">Region D</h3>
                <img src="https://picsum.photos/200/150?random=4" alt="Heat Map Region D" class="w-full h-auto rounded-lg">
            </div>
        </div>
    </div>
    <footer class="mt-8 text-gray-600 dark:text-gray-300">
        <p>© 2023 Company Name. All rights reserved.</p>
    </footer>
</div>

3D 로그인 양식 구성 요소

3D 디자인, 트라이어딕 색 구성표 및 어두운 테마를 지원하는 반응형 로그인 양식입니다. 소셜 미디어 인터페이스에 적합합니다.

열다 미리 보기

                <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 shadow-lg transform transition-all duration-500 hover:scale-105 p-8 rounded-lg border border-gray-200 dark:border-gray-700">
        <div class="text-center mb-6">
            <img class="w-16 h-16 rounded-full mx-auto mb-2" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome Back!</h2>
            <p class="text-gray-600 dark:text-gray-400">Please login to your account</p>
        </div>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400" type="password" id="password" placeholder="••••••••" required>
            </div>
            <button class="w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white font-semibold p-3 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out" type="submit">Login</button>
            <div class="text-center mt-4">
                <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
                <p class="text-gray-600 dark:text-gray-400"><a href="#" class="text-blue-500 hover:underline">Forgot your password?</a></p>
            </div>
        </form>
    </div>
</div>

Content Display Components 컴포넌트

비즈니스/기업 웹 사이트에 대한 다크 모드를 지원하는 반응형 콘텐츠 디스플레이 구성 요소입니다.

열다 미리 보기

                <div class="dark:bg-gray-900 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="md:flex md:items-center md:justify-between">
      <div class="md:w-1/2">
        <h2 class="text-3xl font-bold mb-4">Our Mission</h2>
        <p class="mb-6">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
      </div>
      <div class="md:w-1/2 mt-8 md:mt-0">
        <img src="https://images.unsplash.com/photo-1588702547930-db7c329119ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mission Image" class="rounded-lg shadow-lg">
      </div>
    </div>

    <div class="md:flex md:items-center md:justify-between mt-12">
      <div class="md:w-1/2 mb-8 md:mb-0">
        <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Values Image" class="rounded-lg shadow-lg">
      </div>
      <div class="md:w-1/2 md:pl-8">
        <h2 class="text-3xl font-bold mb-4">Our Values</h2>
        <ul class="list-disc list-inside">
          <li class="mb-2">Integrity and Honesty</li>
          <li class="mb-2">Customer Focus</li>
          <li class="mb-2">Innovation and Excellence</li>
          <li class="mb-2">Teamwork and Collaboration</li>
        </ul>
      </div>
    </div>

    <div class="mt-12 text-center">
      <h2 class="text-3xl font-bold mb-6">What Our Clients Say</h2>
      <div class="md:flex md:-mx-4">
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">John Smith</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CEO, Company A</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Jane Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Marketing Director, Company B</p>
              </div>
            </div>
          </div>
        </div>
        <div class="md:w-1/3 px-4">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
            <p class="italic mb-4">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
            <div class="flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
              <div>
                <p class="font-bold">Peter Jones</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">CTO, Company C</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Like/Reaction Buttons 컴포넌트

반응형 좋아요/반응 버튼 구성 요소는 마이크로 인터랙션을 염두에 두고 설계되었으며, 블로그 및 콘텐츠 소비에 적합한 단색 색 구성표를 사용하며 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
    <div class="flex space-x-4">
        <button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
        </button>
        <button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
        </button>
        <button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
        </button>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>

비디오 플레이어 구성 요소

콘텐츠 소비를 위한 유사한 색 구성표를 사용하여 어두운 모드용으로 설계된 반응형 비디오 플레이어 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-900 text-gray-300 p-4 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative aspect-w-16 aspect-h-9">
        <video class="rounded-lg" controls>
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="mt-4">
        <h2 class="text-lg font-semibold">Video Title</h2>
        <p class="text-sm">This is a short description of the video content. It provides context and encourages the viewer to watch the video.</p>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <div>
            <h3 class="text-md font-semibold">Username</h3>
            <p class="text-xs text-gray-500">Posted on <time datetime="2023-10-01">October 1, 2023</time></p>
        </div>
    </div>
</div>

그리드 레이아웃 구성 요소

스큐어모픽 스타일로 설계된 소셜 미디어 인터페이스를 위한 반응형 그리드 레이아웃 구성 요소로, 트라이어딕 색상, 여러 대화형 요소 및 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-900 text-white p-6">
    <h1 class="text-3xl font-bold mb-6">Social Media Feed</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Post Card -->
        <div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post1/400/200" alt="Post Image" />
            <div class="p-4">
                <div class="flex items-center space-x-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                    <div>
                        <h2 class="font-semibold text-lg">User Name</h2>
                        <p class="text-gray-400">@username</p>
                    </div>
                </div>
                <p class="mt-2 text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
                <div class="mt-4 flex items-center space-x-4">
                    <button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
                    <button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
                    <button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
                </div>
            </div>
        </div>
        <!-- Repeat similar post cards for more content -->
        <div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post2/400/200" alt="Post Image" />
            <div class="p-4">
                <div class="flex items-center space-x-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                    <div>
                        <h2 class="font-semibold text-lg">User Name</h2>
                        <p class="text-gray-400">@username</p>
                    </div>
                </div>
                <p class="mt-2 text-gray-300">Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                <div class="mt-4 flex items-center space-x-4">
                    <button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
                    <button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
                    <button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 shadow-lg rounded-lg overflow-hidden transition transform hover:scale-105 duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/post3/400/200" alt="Post Image" />
            <div class="p-4">
                <div class="flex items-center space-x-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                    <div>
                        <h2 class="font-semibold text-lg">User Name</h2>
                        <p class="text-gray-400">@username</p>
                    </div>
                </div>
                <p class="mt-2 text-gray-300">Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.</p>
                <div class="mt-4 flex items-center space-x-4">
                    <button class="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">Like</button>
                    <button class="px-4 py-2 bg-green-500 rounded hover:bg-green-600">Comment</button>
                    <button class="px-4 py-2 bg-red-500 rounded hover:bg-red-600">Share</button>
                </div>
            </div>
        </div>
    </div>
</div>

검색 상자 구성 요소

파스텔 색조의 구성표가 있는 미니멀하고 평평한 디자인의 검색 상자 구성 요소, 여러 대화형 요소가 있는 복잡한 인터페이스, 작업 또는 제품을 보여주는 포트폴리오를 위해 설계되었습니다.

열다 미리 보기

                <div class="flex justify-center items-center p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-1/2">
    <input type="text" placeholder="Search..." class="w-full h-12 p-4 mr-2 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-300 transition duration-200 ease-in-out" />
    <button class="h-12 px-4 text-white bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 rounded-lg focus:outline-none transition duration-200 ease-in-out">Search</button>
</div>

<div class="mt-6 bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio</h2>
    <p class="text-gray-600 dark:text-gray-400">Showcasing work or products.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" class="w-full" />
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">Brief description of the project.</p>
            </div>
        </div>
    </div>
</div>

사용자 프로필 구성 요소

Tailwind CSS를 사용하는 반응형 사용자 프로필 구성 요소로, 머티리얼 디자인의 영향과 단색 색 구성표가 있습니다. 다크 모드를 지원하고 사용자 정보, 통계 및 최근 활동을 표시합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="relative">
      <img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
      <div class="absolute inset-0 bg-blue-500 opacity-40"></div>
    </div>
    <div class="relative z-10 -mt-16 flex items-center justify-center">
      <img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
    </div>
    <div class="text-center p-6">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
      <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
      </div>
    </div>
     <div class="p-6 border-t border-gray-200 dark:border-gray-700">
      <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
      <ul class="space-y-4">
        <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
          </div>
        </li>
         <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

3D 그레이스케일 비즈니스 컨테이너

비즈니스/기업 웹 사이트를 위한 3D 그레이스케일 컨테이너 구성 요소

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative max-w-md mx-auto dark:bg-gray-800 bg-white rounded-xl shadow-2xl overflow-hidden md:max-w-2xl perspective">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 view-3d" src="https://picsum.photos/seed/unsplash/600/400" alt="Modern building architecture">
      </div>
      <div class="p-8 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm font-bold text-gray-500 dark:text-gray-400">Business Solutions</p>
          <h2 class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">Innovative Strategies for Growth</h2>
          <p class="mt-2 text-gray-600 dark:text-gray-300">We provide cutting-edge solutions to help your business thrive in a competitive market. Our strategies are tailored to your specific needs for maximum impact.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 view-3d-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of the CEO">
          <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">CEO and Founder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.perspective {
  perspective: 1000px;
}

.view-3d {
  transform: rotateY(5deg) rotateX(5deg);
  transition: transform 0.5s ease;
}

.view-3d:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.view-3d-avatar {
    transform: translateZ(20px);
    transition: transform 0.5s ease;
}

.view-3d-avatar:hover {
  transform: translateZ(0px);
}
</style>

콘텐츠 링크로 건너뛰기

Skip to Content Link 구성 요소는 Material Design 원칙, 단색 색 구성표 및 어두운 모드 지원으로 스타일이 지정되었습니다. 전자 상거래 웹 사이트에 적합하며 JavaScript 없이 Tailwind CSS를 사용하여 구축되었습니다.

열다 미리 보기

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 bg-gray-800 text-white px-4 py-2 rounded dark:bg-gray-200 dark:text-gray-900">Skip to content</a>

1 ... 117 118 119 120 121 ... 242

카테고리

모든 구성 요소