Компонент «Карты»
Веб-компонент, разработанный для интерфейсов социальных сетей, отличающийся бруталистским дизайном с цветовой гаммой в оттенках серого, подходящий для отображения карт с отмеченными местоположениями.
HTML-код
<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.
Gradient_Forest_Maps_Component
Простой, отзывчивый компонент карты для образовательных платформ с палитрой градиента зеленого леса и плавными переходами, с поддержкой темного режима.
Компонент «Карты»
Компонент адаптивных карт, выполненный в скевоморфном стиле, с мягкими пастельными тонами и богатым интерфейсом, подходящим для социальных сетей. Компонент поддерживает как светлый, так и темный режимы и включает в себя множество интерактивных элементов.