<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>


<div class="p-10" style="filter:drop-shadow(0 0 1px) drop-shadow(0 0 1px) drop-shadow(0 0 1px)">
  <div class="grid grid-cols-6 grid-rows-4 gap-4">
    <div class="col-span-1 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 1</span>
    </div>

    <div class="col-span-3 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 2</span>
    </div>

    <div class="col-span-2 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 3</span>
    </div>

    <div class="col-span-1 row-span-2 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 4</span>
    </div>

    <div class="col-span-3 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 5</span>
    </div>

    <div class="col-span-2 row-span-2 flex items-center justify-end rounded-lg border-blue-500 bg-white p-4" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 46% 100%, 46% calc(50% - .7em), 0   calc(50% - .7em) );">
      <span class="text-gray-600">Card 6</span>
    </div>

    <div class="col-span-2 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 7</span>
    </div>

    <div class="col-span-1 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4 w-[200%]">
      <span class="text-gray-600">Card 8</span>
    </div>
  </div>
</div>