JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteneur_header">	
			<div id="banniere">			
			</div>
		</div>	
			
		<div id="conteneur_niveaux">
			<div id="niveaux">
				<div class="plan plan1">	
					<div class="header">CP</div>
					<div class="price">$59</div>  
					<div class="monthly">per month</div>      
					<ul>
						<li><b>10GB</b> Disk Space</li>
						<li><b>100GB</b> Monthly Bandwidth</li>
						<li><b>20</b> Email Accounts</li>
						<li><b>Unlimited</b> subdomains</li>			
					</ul>
					<a class="signup" href="http://www..com">S'inscrire</a>						
				</div>
			</div>		
		
		<div id="conteneur_inf">
			<div id="inf">		
			</div>
		</div>
		<div id="conteneur_footer">
			<div id="foot">		
			</div>
		</div>

CSS

* 
			{
			margin : 0;
			padding : 0;
			}
			
			body, html 
			{ 
			width: 100%;
			min-width: 990px;
			}
						
			img 	
			{
			border: 0; 
			}		

/* Bannière ---------------------------------*/
			
			#conteneur_header
			{
			height: 120px;
			background-color: #212121;
			/*position: relative;*/
			}
			
			#banniere
			{
			 width: 980px;
			 margin-left: auto;
			 margin-right: auto;
			 position: relative;
			}
			
/* Fin de la bannière -------------------------*/


  
/* Parie supérieure  --------------------------*/

			#conteneur_niveaux
			{
			background-color: white;
			/*height: 700px;*/
			display: block;
			}
			
			#niveaux
			{
			width: 980px;
			zoom: 1;
			margin-left: auto;
			margin-right: auto;
			padding-top: 100px;
			padding-bottom: 150px;
			margin-bottom: 0;
			text-align: center;
			background-color: white;
    position:relative;
    z-index:2;
			}
			
			#niveaux:before, #niveaux:after 
			{
			content: "";
			display: table
			}

			#niveaux:after 
			{
			clear: both
			}

			#niveaux .plan 
			{
			font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
			background: #fff;      
			border: 1px solid #ddd;
			color: #333;
			padding: 20px;
			width: 140px;
			float: left;
			_display: inline; /* IE6 double margin fix */
			position: relative;
			margin: 0 5px;
			-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
			-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
			box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);	
			}

			#niveaux .plan:after
			{
			z-index: -1; 
			position: absolute; 
			content: "";
			bottom: 10px;
			right: 4px;
			width: 80%; 
			top: 80%; 
			-webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
			-moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
			box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
			-webkit-transform: rotate(3deg);    
			-moz-transform: rotate(3deg);   
			-o-transform: rotate(3deg);
			-ms-transform: rotate(3deg);
			transform: rotate(3deg);
			}
			
			/* ---------------...