모든 구성 요소

                <div class="max-w-2xl mx-auto bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <img class="w-full h-48 rounded-lg object-cover mb-4" src="https://picsum.photos/800/400" alt="Media Content">
    <h2 class="text-2xl font-bold mb-2">Article Title</h2>
    <p class="text-gray-400 mb-4">This is a short description of the content that provides a brief overview of what the article is about.</p>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
        <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500">Published on January 1, 2023</p>
        </div>
    </div>
</div>
              

                <div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9734; <!-- 4 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
    </p>
  </div>
</div>

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9733; <!-- 5 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
    </p>
  </div>
</div>
              

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="flex rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus:outline-none dark:bg-blue-800 dark:hover:bg-blue-700" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0l4.47 4.47 4.47-4.47a.75.75 0 111.06 1.06l-5 5a.75.75 0 01-1.06 0l-5-5a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">License</a>
      <div class="border-t border-gray-100 dark:border-gray-700"></div>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<div class="p-2">
  <img src="https://picsum.photos/200/100" alt="Example Image" class="rounded-md shadow-md">
</div>
<div class="p-2">
  <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-blue-600 dark:border-blue-800">
</div>
              

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
      <div class="p-4">
        <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>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
      <div class="p-4">
        <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>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
      <div class="p-4">
        <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>
      </div>
    </div>
  </div>

  <div class="mt-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
    <div class="flex items-center mt-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
      <div>
        <strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
        <p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
      </div>
    </div>
  </div>
</div>
              

                <footer class="bg-blue-900 text-white py-6 mt-10 dark:bg-gray-800">
    <div class="container mx-auto text-center">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/100/50" alt="Company Logo" class="mx-auto mb-2">
                <h2 class="text-lg font-bold">Company Name</h2>
                <p class="text-sm">Your tagline goes here.</p>
            </div>
            <div>
                <h3 class="text-md font-semibold mb-2">Follow Us</h3>
                <div class="flex justify-center space-x-4">
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instagram" class="h-6 w-6"></a>
                </div>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-600 pt-4">
            <p class="text-xs">&copy; 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>
              

                <div class="glassmorphism-maps-component relative h-96 overflow-hidden rounded-lg shadow-xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg">
  <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/600');"></div>
  <div class="relative h-full flex flex-col justify-between p-6 bg-white bg-opacity-10 dark:bg-gray-900 dark:bg-opacity-10">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">📍 On an adventure</p>
      </div>
    </div>
    <div class="text-right">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
        View Location
      </button>
    </div>
  </div>
</div>
              

                <div class="flex flex-col items-center p-4">
    <h2 class="text-2xl font-bold text-white mb-4 dark:text-gray-200">Portfolio Timeline</h2>
    <div class="flex flex-col space-y-8">
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
        <div class="flex flex-row items-start dark:bg-gray-800 bg-gray-200 rounded-lg shadow-md p-4 w-full max-w-lg">
            <div class="flex-shrink-0 mr-4">
                <img src="https://randomuser.me/api/portraits/thumb/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-400">Brief description of the project, showcasing the main features and achievements.</p>
                <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="mt-2 rounded-md">
            </div>
        </div>
    </div>
</div>
              

                <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="flex items-center space-x-4">
    <!-- Like Button -->
    <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
      <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
      <span>Like</span>
      <span class="ml-1 text-sm">(1.2k)</span>
    </button>

    <!-- Reaction Buttons Dropdown (Skeuomorphic Pop-up) -->
    <div class="relative group">
      <button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl focus:outline-none transition duration-300 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 w-64 p-4 rounded-xl shadow-2xl bg-gray-300 dark:bg-gray-700 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition duration-300 ease-in-out invisible group-hover:visible group-focus-within:visible scale-95 group-hover:scale-100 origin-bottom skeuomorphic-popup">
        <div class="grid grid-cols-4 gap-2">
          <!-- Sample Reactions (replace with actual icons/images) -->
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">👍</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">❤️</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😂</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😮</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😢</span>
          </button>
          <button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
            <span class="text-2xl">😡</span>
          </button>
          </div>
      </div>
    </div>
  </div>
</div>

<style>
.skeuomorphic-popup {
  /* Basic Skeuomorphic effect using box-shadow for depth and highlights */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.3);
}

.dark .skeuomorphic-popup {
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(70,70,70,0.3), 0 5px 15px rgba(0,0,0,0.5);
}
</style>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-lighter դark:bg-gray-darker">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-skeuo-light dark:bg-gray-true dark:shadow-skeuo-dark">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">Register</h2>
    <form class="space-y-4">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Username</label>
        <input type="text" id="username" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" id="email" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input type="password" id="password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-inner-skeuo focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-darkest dark:dark:border-gray-700 dark:text-gray-100">
      </div>
      <button type="submit" class="w-full px-4 py-2 text-white bg-black rounded-md shadow-skeuo-button hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-light dark:text-gray-900 dark:hover:bg-gray dark:focus:ring-gray-darker">Register</button>
    </form>
  </div>
</div>

<style>
.shadow-skeuo-light {
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

.shadow-skeuo-dark {
  box-shadow: 10px 10px 20px #2c2c2c, -10px -10px 20px #444444;
}

.shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

.dark .shadow-inner-skeuo {
    box-shadow: inset 5px 5px 10px #2c2c2c, inset -5px -5px 10px #444444;
}

.shadow-skeuo-button {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.dark .shadow-skeuo-button {
    box-shadow: 5px 5px 10px #2c2c2c, -5px -5px 10px #444444;
}

.bg-gray-lighter {
    background-color: #f3f3f3;
}

.dark\:bg-gray-darker {
    background-color: #333333;
}

.bg-gray-true {
    background-color: #cccccc;
}

.dark\:bg-gray-true {
    background-color: #333333;
}

.dark\:text-gray-100 {
    color: #eeeeee;
}

.dark\:text-gray-300 {
    color: #cccccc;
}

.dark\:bg-gray-darkest {
    background-color: #1a1a1a;
}

.dark\:border-gray-700 {
    border-color: #4d4d4d;
}

.dark\:bg-gray-light {
    background-color: #cccccc;
}

.dark\:text-gray-900 {
    color: #1a1a1a;
}

.dark\:hover\:bg-gray {
    background-color: #808080;
}

.dark\:focus\:ring-gray-darker {
    --tw-ring-color: #333333;
}

</style>
              

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
        <form>
            <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="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="••••••••" required>
            </div>
            <div class="flex items-center justify-between">
                <button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">
            Don’t have an account? <a href="#" class="text-green-500 hover:text-green-400">Sign up</a>
        </p>
    </div>
</div>