Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="bg-gray-100 py-128 grid grid-cols-1 gap-128">
  <section class="flex align-items-center justify-content-center">
    <div>
      <div class="w-320 mb-20 bg-black color-white shadow-md radius-lg overflow-hidden">
        <div class="flex align-items-center justify-content-between px-20 pt-20 mb-10 color-white">
          <button>
            <svg class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
              <title>ionicons-v5-a</title>
              <polyline points="328 112 184 256 328 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/>
            </svg>
          </button>
          <div class="text-lg semibold">Feb 2021</div>
          <button>
            <svg class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
              <title>ionicons-v5-a</title>
              <polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/>
            </svg>
          </button>
        </div>
        <div class="grid grid-cols-7 p-10">
          <div class="text-2xs text-center bold uppercase">Sun</div>
          <div class="text-2xs text-center bold uppercase">Mon</div>
          <div class="text-2xs text-center bold uppercase">Tue</div>
          <div class="text-2xs text-center bold uppercase">Wed</div>
          <div class="text-2xs text-center bold uppercase">Thu</div>
          <div class="text-2xs text-center bold uppercase">Fri</div>
          <div class="text-2xs text-center bold uppercase">Sat</div>
          <button class="relative w-100p font-sm color-white color-opacity-30 transition-200 ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                26
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm color-white color-opacity-30 transition-200 ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                27
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm color-white color-opacity-30 transition-200 ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                28
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm color-white color-opacity-30 transition-200 ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                29
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm color-white color-opacity-30 transition-200 ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                30
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                31
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                1
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                2
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                3
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                4
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                5
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                6
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm bg-primary-500 bg-opacity-40 ratio-square radius-l-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-6 radius-full flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p bg-primary-500 radius-full">
                7
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm bg-primary-500 bg-opacity-40 transition-200 ratio-square">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                8
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm bg-primary-500 bg-opacity-40 ratio-square">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                9
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm bg-primary-500 bg-opacity-40 ratio-square">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                10
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm bg-primary-500 bg-opacity-40 ratio-square">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                11
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm bg-primary-500 bg-opacity-40 ratio-square radius-r-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-6 radius-full flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p bg-primary-500 radius-full">
                12
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                13
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                14
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                15
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                16
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                17
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                18
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                19
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                20
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                21
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                22
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                23
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                24
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                25
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                26
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                27
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                28
              </div>
            </div>
          </button>
          <button class="relative w-100p font-sm ratio-square radius-full">
            <div class="absolute top-0 left-0 w-100p h-100p p-4 flex align-items-center justify-content-center">
              <div class="flex align-items-center justify-content-center w-100p h-100p border-2 border-white border-opacity-0 hover.border-opacity-100 transition-100 radius-full">
                29
              </div>
            </div>
          </button>
        </div>
      </div>
      <div class="w-100p sm.w-320 p-20 flex align-items-center bg-primary-500 color-white shadow-md radius-lg overflow-hidden">
        <div class="flex align-items-center justify-content-center w-40 h-40 mr-16 bg-white radius-full">
          <svg class="w-24 h-24 color-primary-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" x="48" y="80" width="416" height="384" rx="48"/>
            <circle cx="296" cy="232" r="24"/>
            <circle cx="376" cy="232" r="24"/>
            <circle cx="296" cy="312" r="24"/>
            <circle cx="376" cy="312" r="24"/>
            <circle cx="136" cy="312" r="24"/>
            <circle cx="216" cy="312" r="24"/>
            <circle cx="136" cy="392" r="24"/>
            <circle cx="216" cy="392" r="24"/>
            <circle cx="296" cy="392" r="24"/>
            <line fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" stroke-linecap="round" x1="128" y1="48" x2="128" y2="80"/>
            <line fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" stroke-linecap="round" x1="384" y1="48" x2="384" y2="80"/>
            <line fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" x1="464" y1="160" x2="48" y2="160"/>
          </svg>
        </div>
        <div class="font-sm">
          <div class="mb-10">
            Wednesday, Feb 07
          </div>
          <div class="bold">
            10:00 - 11:00
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="flex align-items-center justify-content-center">
    <div class="w-320 md.w-auto flex flex-col md.flex-row bg-white shadow-md radius-lg overflow-hidden p-10 md.pr-0">
      <img src="https://uniformcss.com/assets/img/uniform-hoodie.jpg" class="flex-none w-100p md.w-160 h-192 sm.h-auto object-cover radius-md">
      <div class="p-10 pt-20 md.p-28 md.py-10">
        <div class="flex align-items-center bold text-xs color-cool-gray-600">
          Unisex
        </div>
        <div class="flex align-items-center justify-content-between mb-20">
          <div class="text-xl semibold">Uniform Hoodie</div>
          <span class="text-xl semibold">$50</span>
        </div>
        <div class="flex align-items-center justify-content-between semibold text-xs mb-6">
          Size
          <div class="flex">
            <button class="ml-16">US</button>
            <button class="ml-16 transition-200 color-black color-opacity-30 hover.color-opacity-100">UK</button>
            <button class="ml-16 transition-200 color-black color-opacity-30 hover.color-opacity-100">EU</button>
          </div>
        </div>
        <div class="flex align-items-end justify-content-between mb-24">
          <div class="flex">
            <button class="radius-md flex align-items-center justify-content-center w-32 h-32 mr-6 bg-black color-white text-xs bold">XS</button>
            <button class="radius-md flex align-items-center justify-content-center w-32 h-32 mr-6 bg-cool-gray-50 hover.bg-cool-gray-100 transition-200 text-xs bold">S</button>
            <button class="radius-md flex align-items-center justify-content-center w-32 h-32 mr-6 bg-cool-gray-50 hover.bg-cool-gray-100 transition-200 text-xs bold">M</button>
            <button class="radius-md flex align-items-center justify-content-center w-32 h-32 mr-6 bg-cool-gray-50 hover.bg-cool-gray-100 transition-200 text-xs bold">L</button>
          </div>
          <a href="#" class="ml-10 text-sm underline color-cool-gray-600 hover.color-cool-gray-600">Size guide</a>
        </div>
        <p class="text-sm">Free shipping on orders over $25.</p>
      </div>
    </div>
  </section>
  <section class="flex align-items-center justify-content-center">
    <div class="relative w-320 bg-white shadow-md radius-lg p-20">
      <button class="absolute top-0 right-0 flex align-items-center justify-content-center radius-full bg-primary-500 hover.bg-primary-600 color-white w-28 h-28 mt-n8 mr-n8 shadow-sm text-lg">
        <svg class="fill-current w-18 h-18" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
          <title>ionicons-v5-m</title>
          <path d="M289.94,256l95-95A24,24,0,0,0,351,127l-95,95-95-95A24,24,0,0,0,127,161l95,95-95,95A24,24,0,1,0,161,385l95-95,95,95A24,24,0,0,0,385,351Z"/>
        </svg>
      </button>
      <h4 class="tracking-loose uppercase text-xs bold color-black color-opacity-40 mb-10 text-center">Purchased by 10 of your friends</h4>
      <div class="flex align-items-center justify-content-center mb-24 gutter-x-n14">
        <img src="https://uniformcss.com/assets/img/profiles/profile-1.jpg" class="transform hover.scale-110 transition-200 cursor-pointer w-40 h-40 sm.w-48 sm.h-48 radius-full border-2 sm.border-3 border-white">
        <img src="https://uniformcss.com/assets/img/profiles/profile-2.jpg" class="transform hover.scale-110 transition-200 cursor-pointer w-40 h-40 sm.w-48 sm.h-48 radius-full border-2 sm.border-3 border-white">
        <img src="https://uniformcss.com/assets/img/profiles/profile-3.jpg" class="transform hover.scale-110 transition-200 cursor-pointer w-40 h-40 sm.w-48 sm.h-48 radius-full border-2 sm.border-3 border-white">
        <img src="https://uniformcss.com/assets/img/profiles/profile-4.jpg" class="transform hover.scale-110 transition-200 cursor-pointer w-40 h-40 sm.w-48 sm.h-48 radius-full border-2 sm.border-3 border-white">
        <div class="relative transform transition-200 cursor-pointer w-40 h-40 sm.w-48 sm.h-48 radius-full border-2 sm.border-3 border-white overflow-hidden">
          <div class="absolute t-0 l-0 w-100p h-100p flex align-items-center justify-content-center bg-black bg-opacity-40 hover.bg-opacity-60 transition-200 color-white bold text-sm">+5</div>
          <img src="https://uniformcss.com/assets/img/profiles/profile-6.jpg">
        </div>
      </div>
      <button class="inline-flex align-items-center justify-content-center w-100p h-40 px-20 radius-xs text-sm color-white bg-primary-500 hover.bg-primary-600 focus.shadow-focus transition-100">Buy this course <span class="opacity-60 ml-10">$4.99</span></button>
    </div>
  </section>
  <section class="flex align-items-center justify-content-center">
    <div class="w-320 bg-black shadow-md radius-lg p-20 pt-32">
      <div class="text-xl text-center extrabold tracking-tight color-white mb-6">Sign in to Uniform</div>
      <div class="text-sm text-center color-white color-opacity-60 mb-28">Enter your username and password</div>
      <div>
        <div class="relative mb-14">
          <div class="absolute top-0 left-0 flex align-items-center justify-content-center w-40 h-48 color-white color-opacity-40">
            <svg class="fill-current w-18 h-18" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
              <title>ionicons-v5-o</title>
              <path d="M424,80H88a56.06,56.06,0,0,0-56,56V376a56.06,56.06,0,0,0,56,56H424a56.06,56.06,0,0,0,56-56V136A56.06,56.06,0,0,0,424,80Zm-14.18,92.63-144,112a16,16,0,0,1-19.64,0l-144-112a16,16,0,1,1,19.64-25.26L256,251.73,390.18,147.37a16,16,0,0,1,19.64,25.26Z"/>
            </svg>
          </div>
          <input type="email" class="h-48 px-16 pl-40 text-sm radius-xs bg-white bg-opacity-10 focus.bg-opacity-15 color-white" placeholder="Username" required>
        </div>
        <div class="relative mb-14">
          <div class="absolute top-0 left-0 flex align-items-center justify-content-center w-40 h-48 color-white color-opacity-40">
            <svg class="fill-current w-18 h-18" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
              <title>ionicons-v5-g</title>
              <path d="M368,192H352V112a96,96,0,1,0-192,0v80H144a64.07,64.07,0,0,0-64,64V432a64.07,64.07,0,0,0,64,64H368a64.07,64.07,0,0,0,64-64V256A64.07,64.07,0,0,0,368,192Zm-48,0H192V112a64,64,0,1,1,128,0Z"/>
            </svg>
          </div>
          <input type="password" class="h-48 px-16 pl-40 text-sm radius-xs bg-white bg-opacity-10 focus.bg-opacity-15 color-white" placeholder="Password" required>
        </div>
        <div class="mb-24">
          <label class="inline-flex align-items-center font-sm color-white">
          <input class="text-lg radius-xs bg-white bg-opacity-20 color-primary-400 transition-200 border-1 mr-8 " type="checkbox" checked/>
          Remember me
          </label>
        </div>
        <button class="inline-flex align-items-center justify-content-center w-100p h-40 px-14 radius-xs color-white bg-primary-500 hover.bg-primary-600 focus.shadow-focus transition-100">Sign in</button>
      </div>
    </div>
  </section>
  <section class="flex align-items-center justify-content-center">
    <div class="relative w-320 bg-white shadow-md radius-lg overflow-hidden">
      <img src="https://uniformcss.com/assets/img/dubai.jpg">
      <div class="absolute left-0 bottom-0 w-100p p-14">
        <div class="bg-white bg-opacity-40 backdrop backdrop-blur-sm radius-lg p-20">
          <div class="text-xs semibold color-white text-center">Uniform Academy</div>
          <h4 class="text-xl bold color-black text-center tracking-tight mb-20">Animation in UI Design</h4>
          <div class="flex align-items-center mb-20">
            <div class="flex-none text-xs semibold color-white color-opacity-60 pr-10">
              18.57
            </div>
            <div class="w-100p h-4 radius-full overflow-hidden bg-white bg-200">
              <div class="w-3-5 h-4 bg-primary-500 radius-full">
              </div>
            </div>
            <div class="flex-none text-xs semibold color-white color-opacity-60 pl-10">
              32.56
            </div>
          </div>
          <div class="flex align-items-center justify-content-between">
            <button class="flex align-items-center justify-content-center w-40 h-40 radius-full border-2 hover.bg-black color-black hover.color-white transition-200">
              <svg class="fill-current w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                <title>ionicons-v5-f</title>
                <path d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
              </svg>
            </button>
            <button class="flex align-items-center justify-content-center w-40 h-40 radius-full border-2 hover.bg-black color-black hover.color-white transition-200">
              <svg class="fill-current w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                <title>ionicons-v5-c</title>
                <path d="M400,111V401c0,17.44-17,28.52-31,20.16L121.09,272.79c-12.12-7.25-12.12-26.33,0-33.58L369,90.84C383,82.48,400,93.56,400,111Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/>
                <line x1="112" y1="80" x2="112" y2="432" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/>
              </svg>
            </button>
            <button class="flex align-items-center justify-content-center w-48 h-48 radius-full bg-primary-500 hover.bg-primary-600 color-white transition-200">
              <svg class="fill-current w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                <title>ionicons-v5-c</title>
                <rect x="176" y="96" width="16" height="320" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
                <rect x="320" y="96" width="16" height="320" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
              </svg>
            </button>
            <button class="flex align-items-center justify-content-center w-40 h-40 radius-full border-2 hover.bg-black color-black hover.color-white transition-200">
              <svg class="fill-current w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                <title>ionicons-v5-c</title>
                <path d="M112,111V401c0,17.44,17,28.52,31,20.16l247.9-148.37c12.12-7.25,12.12-26.33,0-33.58L143,90.84C129,82.48,112,93.56,112,111Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/>
                <line x1="400" y1="80" x2="400" y2="432" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/>
              </svg>
            </button>
            <button class="flex align-items-center justify-content-center w-40 h-40 radius-full border-2 hover.bg-black color-black hover.color-white transition-200">
              <svg class="fill-current w-24 h-24" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
                <title>ionicons-v5-h</title>
                <path d="M352,48H160a48,48,0,0,0-48,48V464L256,336,400,464V96A48,48,0,0,0,352,48Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="flex align-items-center justify-content-center">
    <div class="w-320 bg-white shadow-md radius-lg overflow-hidden">
      <div class="pt-20 px-20">
        <div class="text-md bold mb-10">Activity</div>
        <hr class="w-100p h-1 bg-cool-gray bg-100">
      </div>
      <ul>
        <li class="flex px-20 py-16">
          <div class="relative flex flex-col align-items-center flex-none w-40">
            <img src="https://uniformcss.com/assets/img/profiles/profile-2.jpg" class="w-40 h-40 flex-none radius-full">
            <div class="flex-none w-100p h-10">
              <!-- spacer -->
            </div>
            <div class="flex-1 w-2 bg-black bg-opacity-10"></div>
          </div>
          <div class="pl-16">
            <div class="font-sm leading-140 bold mb-16">
              Sam Lilo <br><span class="font-xs regular">2 hours ago</span>
            </div>
            <div class="text-xs">Paid invoice ref. <a class="bold color-primary-400 hover.color-primary-600">#687</a></div>
            <div class="text-md bold">
              $58.28
            </div>
          </div>
        </li>
        <li class="flex px-20 py-16 bg-cool-gray-50">
          <div class="relative flex flex-col align-items-center flex-none w-40">
            <img src="https://uniformcss.com/assets/img/profiles/profile-4.jpg" class="w-40 h-40 flex-none radius-full">
            <div class="flex-none w-100p h-10">
              <!-- spacer -->
            </div>
            <div class="flex-1 w-2 bg-black bg-opacity-10"></div>
          </div>
          <div class="pl-16">
            <h5 class="font-sm leading-140 bold mb-16">
              Sam Lilo <br><span class="font-xs regular">3 minutes ago</span>
            </h5>
            <p class="text-xs">Reviewed the invoice and sent to <a class="bold color-primary-400 hover.color-primary-600">tom@lorem.com</a></p>
          </div>
        </li>
      </ul>
    </div>
  </section>
</main>
              
            
!

CSS

              
                /* Built with Uniform CSS - uniformcss.com */

:root {
	--font-sans: "system-ui";
  /* Add other CSS variable overrides here */
}
              
            
!

JS

              
                
              
            
!
999px

Console