概要:
tailwindcss Image の設定の例になります
外観
- コード
https://github.com/kuc-arc-f/tailwind-sample/blob/main/src/01_image.html
src/01_image.html
- imgタグに、rounded shadow 追加した例です
01_image.html
<div class="px-8 py-12">
<h3 class="text-3xl font-bold" >Image sample :</h3>
<img
class="mt-6 rounded-lg shadow-xl"
src="../img/a1.JPG"
alt="Woman workcationing on the beach"
/>
<h1 class="mt-6 text-2xl font-bold text-gray-900">
about image 123.
<span class="text-indigo-500">text 456.</span>
</h1>
<p class="mt-2 text-gray-600">
Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some
nice weather even when you're not on vacation.
</p>
<div class="mt-4">
<a
class="inline-block px-5 py-3 rounded-lg shadow-lg bg-indigo-500 text-white uppercase tracking-wider font-semibold text-sm"
href="#"
>
BUTON 123
</a>
</div>
</div>
参考のデモページ
https://kuc-arc-f.github.io/tailwind-sample/src/01_image.html
....