JSFiddle - React, Tailwind, and code Playground

by usmanpkz

HTML

<div id="container"><div class="div one">div1</div><!-- 
--><div class="div two">div2</div><!-- 
--><div class="div three">div3</div><!-- 
--><div class="div four">div4</div></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Acme|Righteous&display=swap');

		body, html{
			padding: 0;
			margin: 0;
			user-select: none; /* Non-prefixed version, currently */
      font-family: 'Acme', sans-serif;
		}
    #container{
      height: 100vh;
      width: 100vw;
      max-width: 100%;
      overflow: none;
    }
		.div{
			height: 50vh;
			width: 50vw;
			max-width: 50%;
			display: inline-block;
			text-align: center;
			line-height: 50vh;
			color: white;
			font-size: 4rem;
			overflow: none;
		}
		.div:hover{
			cursor: pointer;
		}
		.div:active{
			font-size: 3.8rem;
			padding-top: 5px;
		}
		.one{
			background-color: #005b9f;
		}
		.two{
			background-color: #004c40;
		}
		.three{
			background-color: #6c6f00;
		}
		.four{
			background-color: #a00037;
		}