JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>sol3</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
border: 0;
}
body
{
width: 100%;
height: 100%;
}
.fixForIe
{
overflow: hidden;
border-radius: 10px;
min-width: 200px;
min-height: 100px;
margin: 50px 100px;
}
.classD
{
position: relative;
border: 2px solid #004c3b;
min-width: 200px;
min-height: 100px;
padding: 8px 10px 8px 8px;
border-radius: 10px;
background-image: -o-linear-gradient(bottom, rgba(8, 69, 46, 0.5), rgba(0, 213, 167, 0.5));
background-image: -moz-linear-gradient(bottom, rgba(8, 69, 46, 0.5), rgba(0, 213, 167, 0.5));
background-image: -webkit-linear-gradient(bottom, rgba(8, 69, 46, 0.5), rgba(0, 213, 167, 0.5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa7FE7D0', endColorstr='#aa83A498',GradientType=0 );
}
.classD div
{
width: 100%;
min-height: 100px;
border: 1px solid #444;
background: #fff;
border-radius: 10px;
overflow: hidden
}
.classD div h3
{
display: block;
border-radius: 10px 10px 0 0;
width: 100%;
height: 25px;
margin-bottom: 10px;
position: relative;
background: -o-linear-gradient(bottom, #FFBD00 , #FFD800) ;
background: -moz-linear-gradient(bottom, #FFBD00 , #FFD800) ;
background: -webkit-linear-gradient(bottom, #FFBD00 , #FFD800) ;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFD800', endColorstr='#FFBD00',GradientType=0 );
}
.classD div h3::before
{
content: "";
position: absolute;
bottom: -20px;
border: 10px solid;
left: 6px;
border-color: #FFBA00 transparent transparent;
}
.classD div span
{
...