検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

タイムラインコンポーネント

ポートフォリオ内の作品や製品を紹介するためのミニマリストのフラットデザインタイムラインコンポーネントで、鮮やかな色とダークテーマのサポートを備えています。

                <div class="flex flex-col space-y-8 p-8 bg-white dark:bg-gray-800">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-blue-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-blue-500 dark:text-blue-400">January 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-red-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-red-500 dark:text-red-400">March 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-green-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-green-500 dark:text-green-400">May 2022</span>
        </div>
    </div>
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Project Image" class="w-12 h-12 rounded-full border-2 border-purple-500">
        <div class="ml-4">
            <h3 class="text-lg font-semibold dark:text-white">Project Title 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            <span class="text-purple-500 dark:text-purple-400">August 2022</span>
        </div>
    </div>
</div>

Glassmorphism Checkout フォームコンポーネント

アーストーンの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインのGlassmorphismチェックアウトフォームコンポーネント。ブログ/コンテンツの目的に適しています。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 py-6 flex flex-col justify-center sm:py-12 dark:bg-stone-900">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-stone-400 to-stone-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-stone-800 dark:text-stone-200 backdrop-filter backdrop-blur-xl bg-opacity-20 dark:bg-opacity-10">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-100">Checkout Form</h1>
        </div>
        <div class="divide-y divide-stone-200">
          <div class="py-8 text-base leading-6 space-y-4 text-stone-700 sm:text-lg sm:leading-7 dark:text-stone-300">
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-Rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Email Address</label>
            </div>
            <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Card Number</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Expiry Date</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">CVV</label>
            </div>
            <div class="relative">
              <button class="bg-stone-600 text-white rounded-md px-6 py-2 dark:bg-stone-700">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

インタラクティブコンポーネントコンポーネント

ダークモードと単色の配色でデザインされたソーシャルメディアインタラクティブコンポーネント。

開けるプレビュー

                <div class="bg-gray-900 text-gray-100 min-h-screen p-6">
    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg">
        <div class="p-4 border-b border-gray-700">
            <h2 class="text-xl font-bold">Interactive Components</h2>
            <p class="text-gray-400">Engage with your network in style.</p>
        </div>
        <div class="flex items-center p-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h3 class="font-semibold">John Doe</h3>
                <p class="text-gray-500 text-sm">@johndoe</p>
            </div>
        </div>
        <div class="p-4">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/500/300" alt="Interactive Image" />
            <p class="mt-2 text-gray-300">This is an example of an interactive post with an image. Feel free to comment and like!</p>
        </div>
        <div class="flex justify-between p-4 border-t border-gray-700">
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Like</button>
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Comment</button>
        </div>
    </div>
</div>

ショッピングカートコンポーネント

Tailwind CSSを使用したシンプルでミニマリストのショッピングカートコンポーネントで、アースカラーの配色、ソーシャルメディアの目的、ダークテーマのサポートを備えています。レスポンシブで、サンプルアイテムが含まれています。このコンポーネントは、最小限の要素で JavaScript を使用しない基本的な表示用に設計されています。

開けるプレビュー

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
  <div class="space-y-4">
    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white font-bold">$39.98</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 3 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$9.50</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>
  </div>

  <!-- Cart Summary -->
  <div class="mt-6 flex justify-between items-center">
    <span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
    <span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
  </div>

  <button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
    Checkout
  </button>
</div>

360度ビューアコンポーネント

マイクロインタラクション、トライアドカラースキーム、複雑な複雑さ、eコマースの目的、レスポンシブデザイン、ダークテーマのサポート、およびTailwind CSSを備えた360度ビューアコンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-4">
  <div class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="product-image w-full h-64 object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-300">
        <button class="text-white text-2xl focus:outline-none">
          <i class="fas fa-expand"></i>
        </button>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm 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-between">
        <span class="text-lg font-bold text-gray-900 dark:text-white">$199.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">
          Add to Cart
        </button>
      </div>
    </div>
    <div class="flex justify-center py-2 bg-gray-200 dark:bg-gray-700">
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-camera-rotate"></i>
      </button>
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-magnifying-glass-plus"></i>
      </button>
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-info-circle"></i>
      </button>
    </div>
  </div>
</div>

製品ギャラリーコンポーネント

ソーシャルメディアに適したパステルカラーの配色でブルータリズムスタイルでデザインされたレスポンシブ製品ギャラリーコンポーネント。高コントラストで大胆なデザイン要素が特徴で、ダークモードに最適化されています。

開けるプレビュー

                <div class="max-w-4xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
    </div>
</div>

バッジコンポーネント

ブログコンテンツの使用用に設計されたニューモーフィックバッジコンポーネントで、インタラクティブな要素とダークモードをサポートするレスポンシブデザインを備えています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">  
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>  
  <div class="grid grid-cols-3 gap-4">    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>    
    </div>  
  </div>  
  <div class="grid grid-cols-1 gap-4 mt-8">    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>  
  </div>  
</div>

認証コンポーネント

Neumorphicが設計したeコマース用の認証コンポーネントで、鮮やかな色、ダークテーマのサポート、レスポンシブデザインを備えています。

開けるプレビュー

                <div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>

チャットウィンドウコンポーネント

3D要素、アースカラーの配色、レスポンシブなダークテーマのサポートで設計されたシンプルなチャットウィンドウコンポーネント。

開けるプレビュー

                <div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-green-600 dark:bg-green-700 p-4">
        <h2 class="text-white text-lg font-semibold">Chat Window</h2>
    </div>
    <div class="p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
            </div>
        </div>
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
            <button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
        </div>
    </div>
</div>

ナビゲーションコンポーネントコンポーネント

Tailwind CSSを使用したダークモードをサポートするレスポンシブナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。

開けるプレビュー

                <nav class="bg-gray-900 text-white">
  <div class="container mx-auto px-6 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
        <span class="text-xl font-bold">MyCompany</span>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-purple-400">Home</a>
        <a href="#" class="hover:text-purple-400">About</a>
        <a href="#" class="hover:text-purple-400">Services</a>
        <a href="#" class="hover:text-purple-400">Contact</a>
      </div>
      <div class="hidden md:block">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
      </div>
      <div class="md:hidden">
        <button class="text-white focus:outline-none">
          <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

1 ... 242 243 244 245 246 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント