JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="bloc-main">
  <div class="indice-bloc">10</div>
  <div class="bloc-main-texte">Placez ici le contenu de  class "bloc-main-texte"</div>
</div><!-- bloc-main -->


<div class="bloc-main">
  <div class="indice-bloc">00</div>
  <div class="bloc-main-texte">Placez ici le contenu de  class "bloc-main-texte"</div>
</div><!-- bloc-main -->

CSS

.bloc-main {
	background-color: #000;
	height: 65px;
	width: 332px;
	margin-bottom: 30px;
}
body {
	margin-left: 40px;
	margin-top: 40px;
}
.bloc-main-texte {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #FFF;
	text-align: center;
	height: 65px;
	width: 332px;
	vertical-align: middle;
	display: table-cell;
	line-height: 65px;
}
.indice-bloc {
	background-color: #FFF;
	height: 20px;
	width: 20px;
	position: relative;
	z-index: 9999;
	top: 22px;
	right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	color: #000;
	text-align: center;
	vertical-align: middle;
	border-radius: 10px;
	border: 1px solid #000;
  
  /*CHANGEMENTS A FAIRE : */
  
	/* display: table-cell; */
  line-height:20px;
}