I am facing difficulties with tailwind layout and text alignment as I attempt to create a responsive design for both mobile and large screens:
https://i.sstatic.net/s8uO3.png
https://i.sstatic.net/28NiX.png
Despite my efforts in the Tailwind Play, I am unable to make it work with HTML.
<div class="grid sm:h-screen sm:grid-rows-2 lg:grid-cols-2">
<section class="bg-black lg:h-screen text-white">
<div class="grid grid-cols-2">
<p class="texto rotate-180 text-5xl">EN BOUCHE:</p>
<p class="text-5xl">Au premier abord déconcertant, il libère ensuite toute sa palette aromatique allant du fruit exotique à la fraicheur des Astéracées.</p>
</div>
</section>
<section class="bg-white sm:h-screen">
<div class="grid grid-cols-2 gap-1">
<p class="text-5xl">"On parie que les hard seltzer ne sont pas une mode passagère mais le reflet de changements profonds des modes de consommation"</p>
<p class="texto rotate-180 text-5xl">HARD SELTZER</p>
</div>
</section>
</div>
css:
.texto {
writing-mode: vertical-rl;
text-orientation: mixed;
}
Thank you for taking the time to provide an answer and your attention to this matter.