Brutalist Feedback コンポーネント
ハイコントラストと大胆なタイポグラフィを備えたブルータリズムのフィードバックコンポーネント。
HTMLコード
<div class="bg-zinc-900 text-lime-400 p-8 max-w-sm mx-auto rounded-none shadow-xl">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold uppercase">Feedback</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-lime-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</div>
<p class="text-sm mb-6">
"This product is loud and in your face, exactly what I needed. No-nonsense and it gets the job done with aggressive efficiency."
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-lime-400 mr-4">
<div>
<p class="text-sm font-bold uppercase">Alex "The Brutal" Johnson</p>
<p class="text-xs text-lime-400">CEO of Concrete Solutions</p>
</div>
</div>
</div>
<!-- Dark Mode -->
<div class="dark bg-lime-400 text-zinc-900 p-8 max-w-sm mx-auto rounded-none shadow-xl mt-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold uppercase">Feedback</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-zinc-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</div>
<p class="text-sm mb-6">
"This product is loud and in your face, exactly what I needed. No-nonsense and it gets the job done with aggressive efficiency."
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-zinc-900 mr-4">
<div>
<p class="text-sm font-bold uppercase">Alex "The Brutal" Johnson</p>
<p class="text-xs text-zinc-900">CEO of Concrete Solutions</p>
</div>
</div>
</div>関連コンポーネント
フィードバックコンポーネントコンポーネント
パステルカラーの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたブルータリストスタイルのフィードバックコンポーネント。フィードバックや推薦文を紹介するポートフォリオ用に設計されています。
フィードバックコンポーネントコンポーネント
ミニマリスト/フラットデザイン ダッシュボードのフィードバックコンポーネントで、補色の配色と適度な複雑さ、レスポンシブ、ダークテーマのサポートを備えています。HTMLとTailwind CSSを使用します。JavaScript はありません。インタラクティブな要素を備えています。画像はpicsum.photosから、アバターは randomuser.me から。