CODEWITHSUNDEEP
csstailwind-css
Guilherme Beserra
Guilherme Beserra

Reputation: 545

Text behind image in Tailwind CSS

I want to do this: enter image description here
But my image stay in right side of div, like that: enter image description here
Soo I don't know why it's happening, that's my code:

<div class="flex h-full justify-center items-center">
        <div>
            <h2 class="font-bold text-2xl text-gray-700">Page Not Found 🕵🏻‍♀️</h2>
            <h3 class="mt-3 text-gray-500">Oops! 😖 The requested URL was not found on this server.</h3>

             <div class="lg:grid justify-center mt-4">
          <BreezeButton
            class="
              inline-table
              w-full
              items-center
              bg-purple-600
              text-white text-xs
              font-bold
              hover:bg-purple-600 hover:shadow-purple
              mt-3
            "
            :href="route('dashboard')"
          >
            Back to home
          </BreezeButton>
        </div>
        </div>
        <div>
        <img src="../../Assets/Img/error404.svg" alt="" />
        </div>
      </div>

Upvotes: 0

Views: 757

Answers (2)

sham
sham

Reputation: 86

As @xavi3r mentioned you need to use flex-col, as a reminder, Tailwind uses a mobile-first breakpoint, so you need to set one of the breakpoints to change it to row for large devices as follows lg:flex-row or any other breakpoint!!

Upvotes: 1

Xavi3r
Xavi3r

Reputation: 42

You flexed the wrapper div so it seems to have placed the items in a row by default. Use "flex-col" alongside that in order to place your items in a column.

Upvotes: 2

Related Questions