<script src="https://cdn.tailwindcss.com"></script>

<div class="container flex-center h-screen bg-indigo-300 rounded-lg mx-auto">
  <p class="card">Ez a szöveg középen lesz, mind vízszintesen, mind függőlegesen.</p>
</div>

<style type="text/tailwindcss">
  @layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
}

@layer components {
  .card {
    @apply flex-center p-6 bg-indigo-500 text-white rounded-lg shadow-md;
  }
}
  </style>