Компонент обратной связи
Отзывчивый компонент обратной связи, разработанный для интерфейсов социальных сетей, включающий элементы 3D-дизайна в цветовой гамме оттенков серого с поддержкой темного режима, адаптированный для средней сложности и интерактивности.
HTML-код
<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
<p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">
This is an example feedback message where users can share their thoughts about the platform and engage with the community.
</p>
<div class="flex justify-between items-center">
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
</div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
<p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">
Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
</p>
<div class="flex justify-between items-center">
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
</div>
</div>Связанные компоненты
Компонент компонентов обратной связи
Компонент обратной связи в бруталистском стиле с пастельной цветовой гаммой, умеренной сложностью и адаптивным дизайном с поддержкой темных тем. Предназначен для портфолио с обратной связью или отзывами.
Компонент обратной связи
Отзывчивый компонент обратной связи, разработанный в соответствии с принципами Material Design, включающий земляные тона и оснащенный поддержкой темного режима. Этот компонент специально разработан для информационных панелей и содержит различные интерактивные элементы.
Скевоморфная составляющая обратной связи (простые, земляные тона)
Простой скевоморфный компонент обратной связи для приборной панели, использующий земляные тона и разработанный для имитации реальных элементов. Полностью адаптивный с поддержкой темного режима.