<div class="grid place-items-center h-full">
  <div class="d-waffle overflow-hidden w-64 py-2 border border-gray-600 m-1 rounded-lg shadow-md">
    <div class="actions flex justify-end space-x-1 p-1 mr-2">
      <div class="w-2 h-2 rounded-full bg-white bg-opacity-50 hover:bg-green-500 cursor-pointer">
        <span class="sr-only">ok</span>
      </div>
      <div class="w-2 h-2 rounded-full bg-white hover:bg-red-500 cursor-pointer">
        <span class="sr-only">close</span>
      </div>
    </div>

    <div class="relative success-face">
      <div class="exclamation absolute left-7 -top-6 z-20 text-red-400 font-bold hidden">-!-</div>
      <div class="face absolute w-11 h-11 bg-white rounded-full border border-gray-800 top-0 left-4 z-10">
        <span class="eye absolute w-1 h-1 bg-gray-900 rounded-full"></span>
        <span class="eye absolute w-1 h-1 bg-gray-900 rounded-full"></span>
        <span class="mouth absolute w-2 h-2 rounded-full"></span>
      </div>
      <div class="shadow absolute w-10 h-1 bg-gray-900 bg-opacity-30 left-5 top-11 z-10"></div>
    </div>
    <div class="message ml-16 text-white">
      <h4 class="mx-2 text-sm font-bold uppercase">Success</h4>
      <p class="mx-2 text-xs text-gray-800">We made a waffle! 🧇</p>
    </div>
  </div>
</div>
html,
body {
  height: 100vh;
  background-color: #f1f1f1;
}

.d-waffle {
  min-height: 5rem;
}

.d-waffle .message h4 {
  text-shadow: 1px 1px #222;
  letter-spacing: 2px;
}

.d-waffle .eye {
  top: 40%;
  left: 21%;
}
.d-waffle .eye:nth-of-type(2) {
  left: 68%;
}

.d-waffle .shadow {
  border-radius: 50%;
}

.d-waffle .mouth {
  top: 43%;
  left: 41%;
}

.d-waffle .success-face .mouth {
  border: 1px solid;
  border-color: transparent #777 #777 transparent;
  transform: rotate(45deg);
}

$white: #fcfcfc;
$grey: #ccc;
$dark: #777;
$error: #ef8d9c;
$orange: #ffc39e;
$success: #b0db7d;
$lime: #99dbb4;
$blue: #7db0db;
$purple: #7d81db;
$yellow: #efe08d;
$peach: #efaf8d;

.d-waffle {
  //@apply bg-gradient-to-br from-green-500 to-indigo-300;
  background: linear-gradient(to bottom right, $success 40%, $lime 100%);
}
View Compiled
/*‾\_(ツ)_/‾*/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn-tailwindcss.vercel.app/