Secretariat Card - Copy this React, Tailwind Component to your project

Corrija e deixe responsivo esse código do Angular com Tailwindcss: <div class="flex flex col xl:flex row xl:h screen bg red dark"> <section class="flex flex row xl:flex col items center xl:w 1/2 bg gradient to r from text to bg hover:from gray light hover:to gray cursor pointer" id="listItems" *ngFor="let secretaria of secretarias" > <img class="p 4 bg text xl:h 24 xl:w full" id="logo" src="{{ secretaria.logo }}" alt="{{ secretaria.logo }} Logos" /> <h1 class="text lg" id="telefone"> {{ secretaria.telefone }} </h1> <ul> <li class="flex flex col items center" *ngFor="let link of secretaria.links" > <a class="m 2 p 4 text nowrap bg button text bg border none cursor pointer rounded md" id="link" [href]="link.url" target="_blank" >{{ link.name }}</a > </li> </ul> <div class="absolute bottom 40 text nowrap text center font semibold text 2xl p 4 rotate 90 bg red text bg uppercase" > {{ secretaria.nome }} </div> </section> </div>