Chapter 08

tailwindcss Image / 画像

knaka Tech-Blog
knaka Tech-Blog
2021.04.29に更新
このチャプターの目次

概要:

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

....