Kevin Powell - Community•2y ago

Positioning elements not responding as expected in Tailwind CSS

I'm currently working on a web project using Tailwind CSS and encountering issues with positioning elements. Despite applying the necessary Tailwind CSS classes, the elements are not responding as expected. I have tried using utility classes such as absolute, relative, fixed, along with top, right, bottom, and left classes to control the positioning. However, the elements do not move or adjust their positions accordingly.

 <section class="services bg-black inline-block w-full h-full">
      <div class="support w-3/5 relative text-white ml-4 top-1/4">
        <h2 data-aos="fade-up" class="text-7xl">Supporting Businesses</h2>
        <p data-aos="fade-up" class="text-3xl">We empower individuals with the knowledge and tools necessary to thrive in their respective industries, we aim to create a thriving ecosystem of innovative and sustainable businesses.</p>
      </div>
      <div class="creative text-right relative w-3/5 m-4 text-white float-right top-1/3">
        <h2 data-aos="fade-up" class="text-7xl">Creatives/Entrepreneurs</h2>
        <p data-aos="fade-up" class="text-3xl">From creative artists to entrepreneurs we pride ourselves on redefining spaces and everyday items to attract, connect, and drive market sales that implement solutions.</p>
    </div>
    </section>

 <section class="services bg-black inline-block w-full h-full">
      <div class="support w-3/5 relative text-white ml-4 top-1/4">
        <h2 data-aos="fade-up" class="text-7xl">Supporting Businesses</h2>
        <p data-aos="fade-up" class="text-3xl">We empower individuals with the knowledge and tools necessary to thrive in their respective industries, we aim to create a thriving ecosystem of innovative and sustainable businesses.</p>
      </div>
      <div class="creative text-right relative w-3/5 m-4 text-white float-right top-1/3">
        <h2 data-aos="fade-up" class="text-7xl">Creatives/Entrepreneurs</h2>
        <p data-aos="fade-up" class="text-3xl">From creative artists to entrepreneurs we pride ourselves on redefining spaces and everyday items to attract, connect, and drive market sales that implement solutions.</p>
    </div>
    </section>

I am trying to have them spaced vertically with more space in between like the attachment shown.

1 Reply

Chris Bolson•2y ago

You could try adding space-y-8 to the parent section (change the 8 to the value you want)

Gaming

Programming

Positioning elements not responding as expected in Tailwind CSS