검색 구성 요소

모든 구성 요소

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

인터랙티브 컴포넌트

소셜 미디어 인터페이스를 위한 스큐어모픽 요소로 설계된 웹 구성 요소로, 보색 구성표와 어두운 테마 지원을 특징으로 합니다.

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
    <div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
    <div class="flex-1">
        <h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
        <p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
        <p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
        <img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
            <button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
            <button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
    </div>
</div>

검색 상자 구성 요소

글래스모피즘 스타일로 설계된 반응형 검색 상자 구성 요소로, 다크 모드를 지원하고 전자 상거래 애플리케이션에 맞게 조정되었습니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="relative">
        <input type="text" placeholder="Search for products..." class="w-full md:w-96 p-4 border border-transparent rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-transparent focus:ring focus:ring-opacity-50 backdrop-blur-md bg-opacity-30 shadow-lg">
        <button class="absolute right-0 top-0 bottom-0 flex items-center px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-r-lg border border-transparent backdrop-blur-md bg-opacity-30">
            <img src="https://picsum.photos/20/20" alt="search icon" class="w-5 h-5" />
        </button>
    </div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
    <h2 class="text-xl font-semibold">Explore Our Products</h2>
    <div class="flex justify-center mt-2 space-x-4">
        <img src="https://picsum.photos/200/100" alt="Product 1" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
        <img src="https://picsum.photos/200/100?random=1" alt="Product 2" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
        <img src="https://picsum.photos/200/100?random=2" alt="Product 3" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
    </div>
</div>

오래된 CRT 모니터 및 VCR 플레이어와 같은 80/90년대 미학에서 영감을 받은 "레트로/빈티지" 디자인의 반응형 미디어 임베드 구성 요소입니다. 슬레이트 그레이 베이스에 청록색과 주황색의 보색 구성표를 사용하여 "비즈니스/기업" 웹사이트에 적합합니다. 이 구성 요소는 재생 버튼 및 미디어 썸네일에 대한 호버 효과, 가짜 REC 조명 애니메이션 및 장식용 비기능 제어 요소가 있는 중간 정도의 복잡성을 특징으로 합니다. 여기에는 Tailwind의 'dark:' 접두사를 사용하는 어두운 테마 지원이 포함됩니다. 미디어 영역은 16:9 종횡비로 설계되었습니다(Tailwind 종횡비 플러그인 또는 패딩 하단 트릭과 같은 CSS 대체 필요). picsum.photos의 자리 표시자 이미지가 사용됩니다.

열다 미리 보기

                <div class="min-h-screen bg-slate-100 dark:bg-slate-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-xl rounded-lg shadow-2xl overflow-hidden border-2 border-slate-400 dark:border-slate-600">
    <!-- Outer Casing - Retro Monitor Look -->
    <div class="bg-slate-300 dark:bg-slate-700 p-2 border-b-2 border-slate-400 dark:border-slate-600">
      <div class="flex items-center space-x-1.5 pl-1">
        <span class="block w-3 h-3 bg-red-500 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-yellow-400 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-green-500 rounded-full opacity-80"></span>
      </div>
    </div>

    <div class="bg-slate-200 dark:bg-slate-800 p-1 sm:p-2">
      <!-- Screen Bezel -->
      <div class="bg-black p-1 sm:p-1.5 rounded-sm shadow-inner">
        <!-- Media Embed Area with Aspect Ratio (requires @tailwindcss/aspect-ratio plugin) -->
        <div class="aspect-w-16 aspect-h-9 relative group overflow-hidden">
          <img src="https://picsum.photos/seed/retrocorp1/1280/720" alt="Retro Media Thumbnail" class="absoluteിക inset-0 w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:opacity-75 filter grayscale group-hover:grayscale-0"/>
          
          <!-- Play Button Overlay -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out bg-black bg-opacity-30 group-hover:bg-opacity-40">
            <button aria-label="Play" class="flex items-center justify-center p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded-sm shadow-md transform transition-all duration-150 ease-in-out hover:scale-105 border-b-2 border-r-2 border-orange-700 dark:border-orange-500 hover:border-orange-600 dark:hover:border-orange-400 active:border-b-0 active:border-r-0 active:translate-x-px active:translate-y-px">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M6 19V5l14 7-14 7z"/>
              </svg>
              <span class="ml-2 text-sm sm:text-base font-semibold hidden md:inline">PLAY</span>
            </button>
          </div>
          
          <!-- Watermark/Branding (subtle, retro) -->
          <div class="absolute bottom-2 right-2 md:bottom-3 md:right-3 flex items-center">
            <span class=

미니멀리스트 인증 양식

반응형, 미니멀리스트 로그인 양식 구성 요소는 포트폴리오 또는 웹 응용 프로그램을 위해 설계되었습니다. 보색이 돋보이는 플랫 디자인 미학이 특징입니다: 파란색은 밝은 모드에서 대화형 요소에 사용되고, 주황색은 어두운 모드에서 사용됩니다. 이 양식에는 이메일 및 비밀번호 필드, '비밀번호 찾기' 옵션, '비밀번호 찾기' 링크, 가입 옵션 및 소셜 로그인 통합(예: GitHub)이 포함됩니다. 어두운 테마를 지원하며 쉽게 통합할 수 있도록 HTML 및 Tailwind CSS로만 구축되었습니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
  <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
    <div class="text-center mb-6 sm:mb-8">
      <!-- Optional: Logo (example using picsum.photos) -->
      <!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
        Sign In
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Welcome back! Please enter your details.
      </p>
    </div>

    <form action="#" method="POST" class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
        <input type="email" name="email" id="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div>
        <div class="flex items-center justify-between mb-1">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
              Forgot password?
            </a>
          </div>
        </div>
        <input type="password" name="password" id="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
      </div>

      <div class="flex items-center">
        <input id="remember-me" name="remember-me" type="checkbox"
                class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
        <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Not a member?
      <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
        Create an account
      </a>
    </p>
    
    <div class="mt-6">
        <div class="relative">
            <div class="absolute inset-0 flex items-center" aria-hidden="true">
                <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
            </div>
            <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                    Or continue with
                </span>
            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 gap-3">
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
                    </svg>
                    Sign in with GitHub
                </a>
            </div>
            <!-- Example for Google Icon (you would need the SVG) -->
            <!-- 
            <div>
                <a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
                    Sign in with Google
                </a>
            </div>
            -->
        </div>
    </div>

  </div>
</div>

소셜 로그인 구성 요소

대시보드를 위해 설계된 복잡하고 반응이 빠른 소셜 로그인 구성 요소입니다. 회색 음영 색 구성표가 있는 어두운 모드 UI를 활용합니다. 소셜 공급자 버튼, 이메일/비밀번호 양식, "내 정보 저장" 토글 및 대체 로그인 옵션이 있는 구분 기호가 있습니다. 이미지 일러스트레이션으로 완벽하게 반응하며 어두운 테마 지원을 위해 dark: 접두사가 있는 Tailwind CSS를 사용합니다. JavaScript가 필요하지 않습니다.

열다 미리 보기

                <section class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
    <!-- Illustration Section -->
    <div class="hidden md:block">
      <img src="https://picsum.photos/seed/dashboard/800/600" alt="Dashboard Illustration" class="object-cover w-full h-full">
    </div>
    <!-- Login Form Section -->
    <div class="px-6 py-8 sm:px-10">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">Sign in to your Dashboard</h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">Use your social account or email</p>
      <!-- Social Login Buttons -->
      <div class="mt-8 grid grid-cols-3 gap-3">
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">G</span>
          <span class="ml-2">Google</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">T</span>
          <span class="ml-2">Twitter</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">GH</span>
          <span class="ml-2">GitHub</span>
        </button>
      </div>
      <!-- Divider -->
      <div class="relative mt-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>
      <!-- Email & Password Form -->
      <form class="mt-6 space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
          <div class="mt-1">
            <input id="email" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1">
            <input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div class="flex items-center justify-between">
          <label class="flex items-center">
            <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 focus:ring-gray-500">
            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Remember me</span>
          </label>
          <div class="text-sm">
            <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Forgot your password?</a>
          </div>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Sign in</button>
        </div>
      </form>
      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Sign up</a></p>
    </div>
  </div>
</section>

Brutalist File Viewer 구성 요소

브루탈리즘 디자인 원칙을 가진 원시적이고 대담한 파일 뷰어 구성 요소입니다. 높은 대비, 틀에 얽매이지 않는 레이아웃, 의도적으로 조잡한 요소가 특징입니다. 이 구성 요소에는 파일 미리 보기, 메타데이터 표시 및 작업 버튼이 뚜렷한 회색 음영 색 구성표로 포함되어 있습니다. Tailwind CSS dark: 유틸리티 클래스를 사용하여 다크 모드 지원으로 완벽하게 반응합니다. 독특한 시각적 접근 방식을 추구하는 비즈니스/기업 웹 사이트에 적합합니다.

열다 미리 보기

                <!-- Brutalist File Viewer Component -->
<div class="w-full bg-white dark:bg-gray-900 border-4 border-black dark:border-gray-700 p-4 md:p-6 font-mono">
  <!-- Component Header -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b-8 border-black dark:border-gray-700 pb-4">
    <h2 class="text-3xl md:text-4xl font-black uppercase tracking-tighter text-black dark:text-white">FILE VIEWER</h2>
    <div class="mt-3 md:mt-0 bg-black dark:bg-gray-800 text-white dark:text-gray-200 px-4 py-2 text-sm tracking-widest">
      FILES: <span class="font-bold">14</span> | STORAGE: <span class="font-bold">64%</span>
    </div>
  </div>

  <!-- File Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Featured File - Takes up more space -->
    <div class="col-span-1 md:col-span-2 border-4 border-black dark:border-gray-700 flex flex-col">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">QUARTERLY_REPORT.PDF</span>
        <span class="text-xs bg-white text-black dark:bg-gray-600 dark:text-white px-2 py-1">PINNED</span>
      </div>
      <div class="h-64 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/800/500" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-40 dark:opacity-60"></div>
        <div class="absolute bottom-0 left-0 w-full p-3 text-white">
          <div class="mb-1 text-xl font-bold uppercase">Q4 Financial Report</div>
          <div class="text-sm opacity-80">Last modified: Yesterday at 14:23</div>
        </div>
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="flex items-center space-x-1">
          <span class="inline-block w-3 h-3 bg-black dark:bg-white rounded-full"></span>
          <span class="text-xs text-black dark:text-gray-200">12.4 MB</span>
        </div>
        <div class="flex space-x-2">
          <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-4 py-2 text-xs uppercase tracking-wider font-bold">Open</button>
          <button class="bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-white border-2 border-black dark:border-gray-700 px-4 py-2 text-xs uppercase tracking-wider font-bold">Download</button>
        </div>
      </div>
    </div>

    <!-- Standard File Cards -->
    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">PRESENTATION.PPTX</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">5.7 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>

    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">BUDGET_2023.XLSX</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/601/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">3.2 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>

    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">LOGO_FINALS.ZIP</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/602/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">8.9 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Shared Users Section -->
  <div class="mt-8 border-t-4 border-black dark:border-gray-700 pt-4">
    <h3 class="text-xl font-black uppercase tracking-tight text-black dark:text-white mb-4">SHARED WITH</h3>
    <div class="flex flex-wrap items-center gap-4">
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">K. JOHNSON</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">EDITOR</div>
        </div>
      </div>
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">T. WILLIAMS</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">VIEWER</div>
        </div>
      </div>
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">S. DAVIS</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">ADMIN</div>
        </div>
      </div>
      <button class="bg-black dark:bg-gray-700 text-white text-sm px-4 py-3 uppercase tracking-wider font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
        + ADD USER
      </button>
    </div>
  </div>

  <!-- Bottom Controls -->
  <div class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center border-t-8 border-black dark:border-gray-700 pt-4">
    <div class="flex flex-col mb-4 md:mb-0">
      <span class="text-xs uppercase tracking-wider text-gray-600 dark:text-gray-400 font-bold">Storage Usage</span>
      <div class="w-48 h-8 border-4 border-black dark:border-gray-700 mt-1 overflow-hidden">
        <div class="bg-black dark:bg-gray-600 h-full w-2/3"></div>
      </div>
    </div>
    <div class="flex gap-3">
      <button class="bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-gray-700 px-6 py-3 text-sm uppercase tracking-widest font-bold">
        UPLOAD NEW
      </button>
      <button class="bg-black dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-600 text-white px-6 py-3 text-sm uppercase tracking-widest font-bold">
        MANAGE ALL
      </button>
    </div>
  </div>
</div>

스큐어모피즘 미디어 컴포넌트

스큐어모피즘에서 영감을 받은 미디어 컴포넌트는 단색 색 구성표와 복잡한 복잡성 수준을 사용하여 블로그/콘텐츠 목적에 맞게 조정되었습니다. 기능에는 반응형 디자인과 JavaScript 없이 어두운 테마 지원이 포함됩니다.

열다 미리 보기

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-xl">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Featured Article Card -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 group">
      <img class="w-full h-64 object-cover" src="https://picsum.photos/800/600?random=1" alt="Featured Article Image">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Featured Article Title</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Published on <span class="font-semibold">October 26, 2023</span></p>
        <p class="text-gray-700 dark:text-gray-300 mt-4">This is a summary of the featured article. It gives a brief overview of the content to entice readers to click and learn more. The design mimics a physical object with subtle borders and shadow.</p>
        <div class="flex items-center mt-6">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-300">John Doe</span>
        </div>
        <a href="#" class="inline-block mt-6 text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>

    <!-- Recent Articles List -->
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6">
      <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Articles</h3>
      <ul>
        <li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 1</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">A short description of the recent article.</p>
          </a>
        </li>
        <li class="border-b border-gray-200 dark:border-gray-600 py-3 last:border-b-0">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 2</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">Another short description of a recent article.</p>
          </a>
        </li>
        <li class="py-3">
          <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
            <h4 class="font-semibold">Recent Article Title 3</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">A final short description for the list.</p>
          </a>
        </li>
      </ul>
       <button class="mt-6 w-full px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">View All Articles</button>
    </div>

  </div>
</div>

소셜 미디어 바닥글 구성 요소

소셜 네트워킹 인터페이스를 위한 반응형 바닥글 구성 요소로, 단색 파란색 색 구성표를 사용하는 Material Design 원칙에 따라 설계되었습니다. 그리드 기반 레이아웃, 깊이 효과(그림자), 대화형 요소에 대한 호버 및 전환 애니메이션, 뉴스레터 구독 양식, 소셜 아이콘, 사용자 아바타 및 Tailwind의 dark: 수정자를 통한 다크 모드 지원을 제공합니다.

열다 미리 보기

                <footer class="bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 shadow-inner pt-16 pb-8 transition-colors duration-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
      <!-- Brand & Description -->
      <div>
        <img class="h-8 mb-4 rounded shadow-md" src="https://picsum.photos/100/40?grayscale" alt="SocialNet Logo" />
        <h2 class="text-lg font-semibold mb-2">About SocialNet</h2>
        <p class="text-sm leading-relaxed">Connect with friends, share your moments, and explore what's happening around you.</p>
      </div>
      <!-- Useful Links -->
      <div class="grid grid-cols-2 gap-8">
        <div>
          <h3 class="text-sm font-semibold mb-3">Product</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Features</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Integrations</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold mb-3">Company</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">About Us</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Careers</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Contact</a></li>
          </ul>
        </div>
      </div>
      <!-- Subscription & Social Icons -->
      <div>
        <h3 class="text-sm font-semibold mb-4">Stay Connected</h3>
        <form class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-2">
          <input type="email" placeholder="Your email" class="flex-grow px-3 py-2 bg-blue-100 dark:bg-blue-800 border border-blue-200 dark:border-blue-700 text-sm placeholder-blue-400 dark:placeholder-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition-colors duration-200" />
          <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow hover:shadow-lg transition-all duration-200">Subscribe</button>
        </form>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Facebook Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.407.593 24 1.324 24H12V14.709h-3.292v-3.63H12V8.271c0-3.265 1.993-5.043 4.897-5.043 1.392 0 2.586.104 2.934.15v3.403l-2.015.001c-1.58 0-1.885.752-1.885 1.85v2.426h3.77l-.492 3.63h-3.278V24h6.422c.73 0 1.324-.593 1.324-1.324V1.324C24 .593 23.407 0 22.676 0z"/></svg>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Twitter Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557a9.93 9.93 0 0 1-2.827.775 4.93 4.93 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.384 4.482A13.94 13.94 0 0 1 1.671 3.149 4.916 4.916 0 0 0 3.194 9.723 4.9 4.9 0 0 1 .964 9.1v.062a4.917 4.917 0 0 0 3.941 4.817 4.913 4.913 0 0 1-2.212.084 4.919 4.919 0 0 0 4.594 3.417A9.868 9.868 0 0 1 .48 19.292 13.94 13.94 0 0 0 7.548 21c9.356 0 14.407-7.721 13.995-14.646A10.025 10.025 0 0 0 24 4.557z"/></svg>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Instagram Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 2.052.248 2.528.415a5.003 5.003 0 0 1 1.845 1.17 5.006 5.006 0 0 1 1.17 1.845c.167.476.359 1.322.415 2.528.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.248 2.052-.415 2.528a5.002 5.002 0 0 1-1.17 1.845 5.004 5.004 0 0 1-1.845 1.17c-.476.167-1.322.359-2.528.415-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-2.052-.248-2.528-.415a4.993 4.993 0 0 1-1.845-1.17 4.994 4.994 0 0 1-1.17-1.845c-.167-.476-.359-1.322-.415-2.528C2.175 15.747 2.163 15.367 2.163 12s.012-3.584.07-4.85c.056-1.206.248-2.052.415-2.528a5.005 5.005 0 0 1 1.17-1.845 5.005 5.005 0 0 1 1.845-1.17c.476-.167 1.322-.359 2.528-.415C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.775.131 4.836.343 4.1.626a7.005 7.005 0 0 0-2.541 1.636A7.005 7.005 0 0 0 .626 4.1C.343 4.836.131 5.775.072 7.052.013 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.277.271 2.216.554 2.952a7.002 7.002 0 0 0 1.636 2.541 7.003 7.003 0 0 0 2.541 1.636c.736.283 1.675.495 2.952.554C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.277-.059 2.216-.271 2.952-.554a7.006 7.006 0 0 0 2.541-1.636 7.004 7.004 0 0 0 1.636-2.541c.283-.736.495-1.675.554-2.952.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.277-.271-2.216-.554-2.952a7.003 7.003 0 0 0-1.636-2.541A7.005 7.005 0 0 0 19.9.626c-.736-.283-1.675-.495-2.952-.554C15.668.013 15.259 0 12 0z"/><path d="M12 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-10.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-12 flex flex-col md:flex-row items-center justify-between border-t border-blue-200 dark:border-blue-700 pt-6">
      <p class="text-xs">&copy; 2023 SocialNet. All rights reserved.</p>
      <div class="flex -space-x-2 mt-4 md:mt-0">
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/35.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User avatar" />
      </div>
    </div>
  </div>
</footer>

파스텔브루탈리스트360애셋뷰어

단순하고 반응이 빠른 360° Asset Viewer 구성 요소로, 브루탈리즘 디자인 스타일과 파스텔 핑크 색상 구성표가 특징입니다. 대시보드에 맞게 조정된 이 제품은 정적 이미지 자리 표시자(360° 보기 시뮬레이션), 작동하지 않는 제어 버튼 및 정보 표시 기능을 갖추고 있습니다. Tailwind CSS로 제작된 이 제품은 다크 모드를 지원하며 두꺼운 테두리와 하드 오프셋 그림자로 원시적이고 대담한 미학을 보여줍니다.

열다 미리 보기

                <!-- Start of Pastel Brutalist 360 Asset Viewer Component -->
<div class="w-full max-w-lg bg-pink-100 dark:bg-slate-800 border-4 border-pink-500 dark:border-pink-600 p-4 sm:p-6 shadow-[8px_8px_0px_#ec4899] dark:shadow-[8px_8px_0px_#db2777] hover:shadow-[4px_4px_0px_#ec4899] dark:hover:shadow-[4px_4px_0px_#db2777] transition-all duration-200">
  <!-- Header/Title -->
  <div class="mb-4 pb-2 border-b-4 border-pink-500 dark:border-pink-600">
    <h2 class="text-2xl sm:text-3xl font-bold text-pink-700 dark:text-pink-300 uppercase tracking-wider">
      360° Asset View
    </h2>
  </div>

  <!-- Image container -->
  <div class="relative w-full aspect-video bg-pink-50 dark:bg-slate-700 border-2 border-pink-300 dark:border-pink-500 mb-4">
    <img src="https://picsum.photos/seed/asset360viewer/800/450" alt="360 degree rotating view of an asset" class="w-full h-full object-cover"/>
    <!-- Optional: Visual cue for interactivity -->
    <div class="absolute inset-0 flex items-center justify-center opacity-30 hover:opacity-60 transition-opacity">
      <svg class="w-16 h-16 text-pink-600 dark:text-pink-400" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
    </div>
  </div>

  <!-- Static "Controls" -->
  <div class="flex flex-col sm:flex-row justify-around items-center space-y-3 sm:space-y-0 sm:space-x-3">
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Left
    </button>
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Zoom
    </button>
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Right
    </button>
  </div>

  <!-- Dashboard-like Info Footer -->
  <div class="mt-6 pt-3 border-t-2 border-pink-300 dark:border-pink-500 text-sm text-pink-600 dark:text-pink-400">
    <p>Asset ID: <span class="font-semibold">XYZ-789</span> | Status: <span class="font-semibold text-green-600 dark:text-green-400">Active</span></p>
    <p class="mt-1">Hint: This is a static visual representation.</p>
  </div>
</div>
<!-- End of Pastel Brutalist 360 Asset Viewer Component -->

레트로 빈티지 인포그래픽 구성 요소

Tailwind CSS로 제작된 반응형 파스텔 색상의 레트로/빈티지 스타일 소셜 미디어 인포그래픽 대시보드 구성 요소로, 사용자 프로필 통계, 인기 해시태그 막대 차트 및 예시 이미지를 제공합니다. Tailwind의 dark: 접두사 및 대화형 호버 애니메이션(JavaScript 필요 없음)을 통한 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="relative max-w-4xl mx-auto p-8 bg-pink-50 dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden">
  <!-- Decorative retro shapes -->
  <span class="hidden md:block absolute top-4 left-4 w-12 h-12 bg-blue-100 dark:bg-blue-700 rounded-full"></span>
  <span class="hidden md:block absolute top-10 right-10 w-8 h-8 bg-yellow-100 dark:bg-yellow-700 rotate-45"></span>
  <span class="hidden md:block absolute bottom-8 left-16 w-6 h-6 bg-green-100 dark:bg-green-700 rounded-sm"></span>

  <div class="relative z-10">
    <h2 class="text-3xl font-extrabold text-purple-700 dark:text-purple-300 mb-2">Retro Social Insights</h2>
    <p class="text-md text-gray-700 dark:text-gray-300 mb-6">Your 90s style user engagement dashboard at a glance</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User Stats Card -->
      <div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4 space-y-4">
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"
               class="w-12 h-12 rounded-full border-2 border-purple-300 dark:border-purple-600"/>
          <div>
            <h3 class="text-lg font-bold text-purple-700 dark:text-purple-300">Jane Doe</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">@janedoe</p>
          </div>
        </div>
        <div class="flex justify-between">
          <div class="text-center">
            <p class="text-2xl font-bold text-blue-500 dark:text-blue-300">1.2k</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-green-500 dark:text-green-300">3.4k</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-center">
            <p class="text-2xl font-bold text-pink-500 dark:text-pink-300">5.6k</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Likes</p>
          </div>
        </div>
      </div>

      <!-- Trending Hashtags Chart -->
      <div class="bg-white bg-opacity-70 dark:bg-gray-700 dark:bg-opacity-70 rounded-lg p-4">
        <h4 class="text-purple-700 dark:text-purple-300 font-semibold mb-4">Trending Hashtags</h4>
        <ul class="space-y-4">
          <li class="group">
            <div class="flex justify-between mb-1">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">#RetroVibes</span>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">68%</span>
            </div>
            <div class="w-full bg-purple-200 dark:bg-purple-600 rounded h-2 overflow-hidden">
              <div class="group-hover:bg-purple-400 dark:group-hover:bg-purple-500 transition-all duration-300 bg-purple-500 dark:bg-purple-300 h-2"
                   style="width: 68%"></div>
            </div>
          </li>
          <li class="group">
            <div class="flex justify-between mb-1">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">#VintageStyle</span>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">54%</span>
            </div>
            <div class="w-full bg-yellow-200 dark:bg-yellow-600 rounded h-2 overflow-hidden">
              <div class="group-hover:bg-yellow-400 dark:group-hover:bg-yellow-500 transition-all duration-300 bg-yellow-500 dark:bg-yellow-300 h-2"
                   style="width: 54%"></div>
            </div>
          </li>
          <li class="group">
            <div class="flex justify-between mb-1">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">#Nostalgia</span>
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">42%</span>
            </div>
            <div class="w-full bg-pink-200 dark:bg-pink-600 rounded h-2 overflow-hidden">
              <div class="group-hover:bg-pink-400 dark:group-hover:bg-pink-500 transition-all duration-300 bg-pink-500 dark:bg-pink-300 h-2"
                   style="width: 42%"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Illustrative Image -->
    <div class="mt-6">
      <img src="https://picsum.photos/800/200?random=2" alt="Infographic illustration"
           class="w-full h-48 object-cover rounded-lg shadow-inner transition-transform duration-300 hover:scale-105"/>
    </div>
  </div>
</div>

1 ... 164 165 166 167 168 ... 335

검색 구성 요소

카테고리

모든 구성 요소

인터랙티브 컴포넌트

검색 상자 구성 요소

레트로 미디어 임베드 컴포넌트

미니멀리스트 인증 양식

소셜 로그인 구성 요소

Brutalist File Viewer 구성 요소

스큐어모피즘 미디어 컴포넌트

소셜 미디어 바닥글 구성 요소

파스텔브루탈리스트360애셋뷰어

레트로 빈티지 인포그래픽 구성 요소