<!--
Tutorial:
https://devdojo.com/tnylea/creating-browser-mockups-in-tailwindcss
-->
<div class="max-w-2xl mx-auto my-10">
<div class="w-full h-11 relative rounded-t-lg bg-blue-900 flex overflow-hidden justify-start items-center space-x-1.5 px-2">
<div class="absolute w-full h-full inset-0 bg-black opacity-50"></div>
<span class="relative w-3 h-3 border-2 rounded-full border-red-400"></span>
<span class="relative w-3 h-3 border-2 rounded-full border-yellow-400"></span>
<span class="relative w-3 h-3 border-2 rounded-full border-green-400"></span>
</div>
<div class="relative bg-blue-600 border-t-0 w-full h-96 border-t border-blue-900">
<div class="absolute w-full h-full inset-0 bg-black opacity-60"></div>
</div>
</div>
This Pen doesn't use any external JavaScript resources.