19'C 흐림
서울 강남구
html
<!-- https://source.unsplash.com/random -->
<div class="flex justify-center items-center h-screen">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="https://source.unsplash.com/random/1600x900" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
#photography
</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
</div>
</div>
</div>
css
$poppins: 'Poppins', sans-serif;
$background: #FAFAFC;
$shadow: 0 4px 12px -2px rgba(#6B75A1, .16);
$c-darkGray: #4a4a4e;
$ease: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
body {
font-family: $poppins;
color: $c-darkGray;
}