Tailwind CSS show text under image-CodePudding

i am trying to show text under image for responsive design. right now it is showing behind icon. how i can show text below icon.

  <link
  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
  <div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4  items-center justify-center">
  <div class=" absolute  fas fa-book-reader text-6xl text-gray-600"></div>
  <div class=" text-base"> Caring Enviroment</div>
  </div>

CodePudding user response：

You need to remove absolute class

  <link
  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
  <div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4  items-center justify-center">
  <div class="fas fa-book-reader text-6xl text-gray-600"></div>
  <div class=" text-base text-center"> Caring Enviroment</div>
  </div>

CodePudding user response：

Remove absolute or relpace absulte with relative. On this way you can position (top-10 etc.) the box if you want.

https://play.tailwindcss.com/TU6xLsUjj4