JSFiddle - React, Tailwind, and code Playground

by Rasmus Bergström

HTML

<body>
<section class='main'>
  <ul class='menu-grid'>
    <a href='#'>
      <li>
        <div class='menu-info'>
          <div id='topleftcorner'></div>
          <div id='bottomrightcorner'></div>
          <h1>Resurskonsulter</h1>
        </div>
      </li>
    </a>
    <a href='#'>
      <li>
        <div class='menu-info'>
          <div id='topleftcorner'></div>
          <div id='bottomrightcorner'></div>
          <h1>CRM</h1>
        </div>
      </li>
    </a>
  </ul>
</section>
</body>

CSS

.menu-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 0 20% 20%;

	
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;


}
.menu-info:hover {
	
}

.menu-info {
	background: #f5f5f5;
}

.menu-info h1 {
	color: #000;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	letter-spacing: 2px;
	font-size: 22px;
	margin: 100px 30px 10px;
	padding: 15px 0 0 0;
	height: 60px;
	font-family: Helvetica;


    font-weight: 100;
}

.menu-info p {
	color: #fff;
	padding: 5px 5px;
	font-style: italic;
	margin: 0 10px;
	font-size: 12px;
	opacity: 0;
	-webkit-transition: all ease-in-out 0.4s;
	-moz-transition: all ease-in-out 0.4s;
	-o-transition: all ease-in-out 0.4s;
	-ms-transition: all ease-in-out 0.4s;
	transition: all ease-in-out 0.4s;
}

.menu-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Helvetica Neue', sans-serif;
}


.menu-info.orange p a:hover {
	color: #fff;
}
.menu-info.green p a:hover {
	color: #fff;
}
.menu-info.cyan p a:hover {
	color: #fff;
}

.menu-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.menu-grid:after,
.menu-item:before {
	content: '';
    display: table;
}

.menu-grid:after {
	clear: both;
}

.menu-grid li {
	width: 270px;
	height: 270px;
	display: inline-block;
	margin: 40px;
}

#topleftcorner {
    position: absolute;
    height: 25%;
    width: 25%;
    /*border: 1px solid #2F3034;*/
    border-left: 1px solid #000;
    border-top: 1px solid #000;
}
#bottomrightcorner {
    position: absolute;
    height: 25%;
    width: 25%;
    bottom: 0;
    right: 0;
    /*border: 1px solid #2F3034;*/
    border-right: 1px solid #2F3034;
    border-bottom: 1px...