Skip to content

Instantly share code, notes, and snippets.

@drikusroor

drikusroor/tailwindcss-masonry.html

Created November 18, 2023 18:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save drikusroor/652098c2da0f8f7f2adda19b0567dcc4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save drikusroor/652098c2da0f8f7f2adda19b0567dcc4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. drikusroor created this gist Nov 18, 2023.
    22 changes: 22 additions & 0 deletions tailwindcss-masonry.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <div class="h-screen w-full bg-slate-300 p-5">
    <div class="p-5 columns-3 gap-3 bg-white rounded-lg drop-shadow-lg">
    <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
    Lorem ipsum
    </div>
    <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
    Lorem ipsum, hello world!
    </div>
    <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
    Mary had a little lamb. Its fleece was white as snow.
    </div>
    <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
    Hey
    </div>
    <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
    Porcupine tree
    </div>
    <div class="mb-3 bg-amber-600 text-white text-center p-3 rounded">
    Hey
    </div>
    </div>
    </div>