desearia que se arreglara este codigo pero vaya ahi hay tres div, pero en la vista de compu estan bien, peroen la del telefono quiero que vayan verticales los 3 asi en el orden que estan, solo necestio que se pueda agregar el responsive en tailwind para que los 3 contenedores en el orden que estan se vean verticalmente

este es el codigo en cuestion:

import React from "react"

const Home = ()=>{
    return (

<>

{/* <NavBar /> */}
<div className="bg-black scroll-smooth hover:scroll-auto ">
    <div className="bg-black text-white h-screen flex items-center justify-center">
    <div className="container mx-auto flex flex-wrap items-center">
      <div className="flex flex-col items-start ml-7">
        <div className="border-4 border-pink-500 p-8 rounded ml-[80px] mb-60">
          <h2 className="text-sm flex justify-center font-semibold text-white mb-6">¡Elegí a tu próximo Consejo Estudiantil!</h2>
          <div className="flex justify-center items-center">
    <img src="/src/assets/home1.png" alt="imagen1" className="w-32 h-auto"/>
  </div>
        <div className="flex justify-center space-x-10">
          <button className="border-2 border-white bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-800 transition duration-300">Regístrate</button>
          <button className="border-2 border-white bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-800 transition duration-300">Logueate</button>
        </div>
      </div>
    </div>
  </div>
  <div className="container mx-auto flex flex-wrap items-center">
      <div className="flex flex-col items-start ml-7">
        <div className="border-4 border-pink-500 p-8 rounded ml-[50px] mb-60">
          <h2 className="text-sm flex justify-center font-semibold text-white mb-5">Sobre nosotros</h2>
          <div className="flex justify-center items-center">
    <img src="/src/assets/home2.png" alt="imagen2" className="mb-6 w-32 h-auto"/>
  </div>
        <h2 className="text-sm flex justify-center font-semibold text-white mb-5 ">Misión visión, desarrolladores, detalles sobre Spollnet.</h2>
        <div className="flex justify-center space-x-10">
          <button className="border-2 border-white bg-purple-700 text-white px-20 py-3 rounded-lg font-semibold hover:bg-purple-800 transition duration-300">Sobre nosotros</button>
        </div>
      </div>
    </div>
  </div>
  {/*<div className="w-1/2 p-8 flex justify-center items-center">
    <img src="/src/assets/home1.png" alt="imagen1" className="mr-[-600px] mb-80 w-1000 h-auto" />
  </div>
    <div className="container mx-auto flex flex-wrap items-center">
      <div className="flex flex-col items-start ml-7 mt-[600px] mr-[100px]">
        <div className="flex-2">
        <div className="border-4 border-pink-500 p-8 rounded ml-[110px] mb-80">
          <h2 className="text-sm flex justify-center font-semibold text-white mb-6">Sobre nosotros</h2>
          <p className="text-sm flex justify-center font-semibold text-white mb-6">Misión visión, desarrolladores, detalles sobre Spollnet.</p>
          <div className="flex justify-center space-x-10">
            <button className="border-2 border-white bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-800 transition duration-300">Sobre nosotros</button>
          </div>
        <div className="flex justify-center space-x-10">
      </div> 
      </div> 
        </div> 
      </div>
    </div>*/}
    </div>
    <div className="mt-[-60px] ">
    <div className="flex flex-col items-start ml-7 ">
        <div className="border-4 border-pink-500 p-8 rounded ml-[80px] w-[-400px]">
          <h2 className="text-sm flex justify-center font-semibold text-white mb-5">Candidaturas</h2>
          <div className="flex justify-center items-center">
    <img src="/src/assets/home3.png" alt="imagen2" className="mb-6 w-32 h-auto"/>
  </div>
        <h2 className="text-sm flex justify-center font-semibold text-white mb-5 ">¡Revisa a tus postulantes y decide quien tiene las mejores propuestas! ¿Quien tiene la mejor propuesta? ¡Conoce las diferentes candidaturas!</h2>
        <div className="flex justify-center space-x-10">
          <button className="border-2 border-white bg-purple-700 text-white px-[345px] py-3 rounded-lg font-semibold hover:bg-purple-800 transition duration-300">Ver candidaturas</button>
        </div>
      </div>
    </div>
</div>

{/* <footer class="bg-black text-white py-8 px-4 flex justify-between items-center">
    <div class="flex items-center">
        <img src="./src/assets/logo.jpg" alt="Logo" class="h-20 w-100 mr-6"/>
        <p className="ml-7">@2024 Crea J</p>
        <a href="#" class="text-white ml-7">Términos y Privacidad</a>
        <a href="#" class="text-white ml-7">Contacto</a>
    </div>
    <div class="flex items-center">
        <a href="#" class="text-pink-500 hover:text-pink-700 mr-4">
            <svg fill="currentColor" viewBox="0 0 24 24" class="h-6 w-6">
                
            </svg>
        </a>
        <a href="#" class="text-pink-500 hover:text-pink-700 mr-4">
            <svg fill="currentColor" viewBox="0 0 24 24" class="h-6 w-6">
                
            </svg>
        </a>
        <a href="#" class="text-pink-500 hover:text-pink-700">
            <svg fill="currentColor" viewBox="0 0 24 24" class="h-6 w-6">
               
            </svg>
        </a>
    </div>
</footer> */}
  </div>

</>

  );
}
export default Home;

para vista de telefono, los 3 contenedores en forma vertical