検索コンポーネント

すべてのコンポーネント

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

Maps コンポーネント

ソーシャルメディアインターフェイス用に設計されたWebコンポーネントで、グレースケールの配色を備えたブルータリズムデザインが特徴で、場所がマークされたマップを表示するのに適しています。

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg dark:bg-gray-800 max-w-2xl mx-auto">
  <h2 class="text-2xl font-bold mb-4">Maps Component</h2>
  <div class="relative mb-5">
    <img src="https://picsum.photos/600/400" alt="Map" class="w-full h-64 object-cover rounded-md mb-2">
    <div class="absolute left-4 top-4 bg-black bg-opacity-50 p-2 rounded">Location 1</div>
    <div class="absolute left-24 top-20 bg-black bg-opacity-50 p-2 rounded">Location 2</div>
    <div class="absolute left-10 top-36 bg-black bg-opacity-50 p-2 rounded">Location 3</div>
  </div>
  <div class="flex flex-col space-y-3">
    <h3 class="text-lg font-semibold">Locations</h3>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 1</p>
        <p class="text-sm">Location 1 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 2</p>
        <p class="text-sm">Location 2 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 3</p>
        <p class="text-sm">Location 3 Description</p>
      </div>
    </div>
  </div>
  <button class="mt-5 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600">View More</button>
</div>

タブコンポーネント

ソーシャルメディアインターフェース用に設計されたレスポンシブタブコンポーネントで、マイクロインタラクションとダークテーマが特徴です。このコンポーネントには、複数のインタラクティブ要素が含まれており、Tailwind CSS を使用します。

開けるプレビュー

                <div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
    <div class="flex space-x-4 border-b border-gray-700">
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
    </div>
    <div class="mt-4">
        <div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
            <h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
            <p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
            <div class="mt-4">
                <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                    <span class="text-gray-200 dark:text-gray-300">User Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

OAuth ボタンコンポーネント

ブログまたはコンテンツ消費プラットフォーム用に設計された Neumorphism スタイルの OAuth ボタンコンポーネント。このコンポーネントは、レスポンシブデザイン、ダークテーマのサポート、単色の配色を備えたさまざまな OAuth プロバイダーのボタンを備えています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 1</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 2</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 3</span>
        </a>
    </div>
</div>

<style>
  .shadow-neumorphism {
    box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2), 
                -5px -5px 15px rgba(0, 0, 0, 0.2);
  }
</style>

バッジコンポーネント

ビジネス/企業のWebサイト向けに設計された汎用性の高いバッジコンポーネントで、ダークモードUIでアースカラーを利用してユーザーエクスペリエンスを向上させます。このコンポーネントは、いくつかの対話型要素による応答性を備えています。

開けるプレビュー

                <div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
    <!-- Badge 1 -->
    <div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Project Leader</span>
    </div>
    <!-- Badge 2 -->
    <div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Senior Developer</span>
    </div>
    <!-- Badge 3 -->
    <div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>UI/UX Designer</span>
    </div>
    <!-- Badge 4 -->
    <div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Content Strategist</span>
    </div>
</div>

ダッシュボードコンポーネント

マイクロインタラクション、グレースケールの配色、ブログ/コンテンツの目的に合わせた複雑な複雑さのレベルを備えたレスポンシブダッシュボードコンポーネント。ダークテーマをサポートします。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Content Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero et diam euismod, vitae elementum.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 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-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Peter Jones</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

  </div>
</div>

サイトマップコンポーネント

glassmorphismで設計されたレスポンシブサイトマップコンポーネントで、すりガラスのような半透明の効果とぼかしを特徴とし、作品や製品を紹介するポートフォリオを実現します。ダークテーマをサポートし、適度な複雑さを維持しながら補色を利用します。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
            </div>
        </div>
    </div>
    <footer class="text-center text-gray-600 dark:text-gray-400">
        <p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
        <p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
    </footer>
</div>

アクティビティフィードコンポーネント

Tailwind CSS を使用してスタイル設定された、マイクロインタラクションとダークテーマを備えた e コマース向けの複雑なアクティビティフィードコンポーネント。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

3Dデザイン、単色の配色、Eコマース向けの適度な複雑さを備えたインタラクティブコンポーネントコンポーネントで、レスポンシブデザインとダークテーマがサポートされています。

開けるプレビュー

                
<div class="bg-gray-100 dark:bg-gray-800 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">Featured Products</h2>
      <p class="mt-4 text-lg leading-6 text-gray-600 dark:text-gray-300">Explore our selection of high-quality products.</p>
    </div>
    <div class="mt-10 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/237/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Product Name</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Product description goes here.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$19.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Repeat product block for more products -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/238/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Another Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$29.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

       <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/239/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Third Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Yet another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$39.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

フッターナビゲーションコンポーネント

ダークモードのビジネス/企業Webサイト用に設計されたレスポンシブフッターナビゲーションコンポーネントで、トライアドカラースキームとインタラクティブ機能を備えた中程度の複雑さが特徴です。

開けるプレビュー

                <footer class="bg-gray-800 text-gray-200 py-6">
    <div class="container mx-auto flex justify-between items-center flex-wrap">
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Company Info</h4>
            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Quick Links</h4>
            <ul>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Home</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">About Us</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Services</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Contact Us</h4>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <div class="text-sm">
                    <p>John Doe</p>
                    <p>[email protected]</p>
                </div>
            </div>
            <p class="text-sm">Reach out to us for any inquiries.</p>
        </div>
    </div>
    <div class="bg-gray-700 text-center py-4 mt-4">
        <p class="text-sm">&copy; 2023 Company Name. All rights reserved.</p>
    </div>
</footer>

価格表示コンポーネント

Neumorphismスタイルと補色スキームを備えたレスポンシブ価格表示コンポーネントで、ダークモードをサポートするブログコンテンツ用に設計されています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Price Card -->
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">

    <!-- Card Header -->
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Basic Plan</h3>
      <span class="text-2xl font-bold text-blue-600 dark:text-teal-400">$29</span>
    </div>

    <!-- Card Features -->
    <ul class="space-y-4 text-gray-700 dark:text-gray-300">
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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="M5 13l4 4L19 7"></path></svg>
        <span>10 Users</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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="M5 13l4 4L19 7"></path></svg>
        <span>50GB Storage</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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="M5 13l4 4L19 7"></path></svg>
        <span>Email Support</span>
      </li>
    </ul>

    <!-- Call to Action Button -->
    <div class="mt-8">
      <button class="w-full py-3 rounded-lg font-semibold text-white bg-blue-600 dark:bg-teal-600 shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transition duration-300 hover:opacity-90">
        Get Started
      </button>
    </div>

  </div>

  <!-- Custom Neumorphism Shadows (defined in CSS) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
       box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
    }
     .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
    }
     .dark .shadow-neumorphic-button-dark {
       box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
    }
  </style>

</div>

1 ... 222 223 224 225 226 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント