I don't know how to make the picture stand out from the top of the div. Does anyone know how to do this?

What it looks like:

How it should look like:

  <div >
      <div >
          <img src="/img/landing/WerSindWir.svg" >
          <div >
              <h3 >
                  <span >LoremIpsum - LoremIpsum</span><br>
                  <span ><span >Wer</span> sind wir?</span>
              </h3>
              <p >LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum</p>
          </div>
      </div>
  </div>

CodePudding user response：

You can create a div with a class relative and put the blue div and image in it with an absolute class. Then you can position the image and blue div separately, relative to the parent with the top, left, right and bottom classes.

In the blue div, set the left margin to the space needed for the image (ml-72 in the example).

Like:

<div >
  <div id=“BLUEDIV” >
    <div >
      <h3 >
        <span >LoremIpsum - LoremIpsum</span><br />
        <span ><span >Wer</span> sind wir?</span>
      </h3>
      <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum esse, excepturi alias ut delectus eius.</p>
    </div>
  </div>
  <img id=“IMAGE”  src="https://placekitten.com/100/200"  />
</div>

You can see this far from perfect example working in tailwind play.