នេះគឺ simple កូដសម្រាប់ធ្វើ card responsive screen ដែលមានដូចខាងក្រោមនេះ
</head>
<body>
<!-- background center -->
<div class="flex bg-zinc-500 justify-center">
<!-- Card -->
<div class="bg-zinc-700 rounded-lg">
<!-- Flex Contain -->
<div class="flex flex-col md:flex-row items-center">
<!-- Image -->
<img src="./kep3.jpeg" alt=""
class="object-fit rounded-t-lg sm:rounded-l-lg"
>
<!-- Content -->
<div class="p-5 space-y-3 m-5">
<h1 class="text-xl font-bold text-gray-200">Kep province</h1>
<p class="text-base text-gray-100">The Kep provnce beach is populer in province for releac in weekend!</p>
<input type="text" placeholder="input your email"
class="p-2 px-5 border bg-zinc-700 rounded-lg border-zinc-500 text-white"
>
</div>
</div>
</div>
</div>
</body>
Kep province
Code
<!-- Card -->
<div class="mb-2 flex cursor-pointer flex-col bg-gray-300 md:flex-row">
<!-- image -->
<div class="overflow-hidden">
<img src="https://pppenglish.sgp1.digitaloceanspaces.com/image/main/field/image/a_birds-eye_view_of_kep_beach_last_april._kep_provincial_administration.jpg" alt=""
class="duration-300 hover:scale-105 hover:opacity-80 md:w-96" />
</div>
<!-- Tittle -->
<div class="m-1 flex items-center p-3">
<h1 class="text-xl text-blue-700 md:text-3xl">Kep province</h1>
</div>
</div>
0 Comments