JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.com/static/img/background1.jpg"></script>
<body>
<div id="wrapper">
	<div class="connex_left">
		<div class="ribbon-wrapper">
			<div class="ribbon-front">
				Ici le titre du cadre
			</div>
			<div class="ribbon-edge-topleft"></div>
			<div class="ribbon-edge-topright"></div>
			<div class="ribbon-back-left"></div>
			<div class="ribbon-back-right"></div>
		</div>
		<div class="box">
		Voici une div test pour voir comment la box se comporte avec du text ou autre. cadre uniquement fait avec du css :)
			<p>
			On peut voir ici le comportement du cadre
			</p>
			<p>
			J'ajoute du texte pour voir comment il se comporte sans hauteur défini
			</p>
			<p>
			Eh eh il assure pas mal et ne se déforme pas :)
			</p>
			<div class="box2">
				<div class="pentagon">
					<div class="title">
						Ici encore du texte
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

CSS

body {
	background:url('https://terre-noire.com/static/img/background1.jpg') no-repeat 50% top;
	margin: 0px;
  border: none;
  padding: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
	color:#5e422c;
	font-family:arial, sans-serif;
}

#wrapper {
	margin:180px auto 0;
	width:90%;
	overflow:hidden;
}

.connex_left {
	width:35%;
	float:left;
}

/* ribbon style */

 .ribbon-wrapper {
	position: relative;
	margin:15px auto 0;
	width:90%;
}
  .ribbon-front {
	background-color: #dea852;	
	height: 25px;
	width: 100%;
	position: relative;
	margin:0 auto;
	z-index: 2;
	text-align:center;
	line-height:25px;
	font-family:crusades, arial, sans-serif;
	font-weight:normal;
	font-size:120%;
	color:#4c3c22;
	text-shadow:0px 0px 3px rgba(20,20,20,.5);
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

  .ribbon-edge-topleft {
	left: -1px;
	border-color: transparent #aa7b32 transparent transparent;
}

.ribbon-edge-topright {
	right:-1px;
	border-color: transparent transparent transparent #aa7b32;
}
  .ribbon-edge-topleft, .ribbon-edge-topright {
	top: -5px;
	border-width: 5px 11px 0 0;
}
.ribbon-edge-topright {
	border-width: 5px 0 0 11px;
}

 .ribbon-back-left {
	position: absolute;
	top: -5px;
	left: -16px;
	width: 25px;
	height: 25px;
	background-color: #dca143;	z-index: 0;
}

  .ribbon-back-right {
	position: absolute;
	top: -5px;
	right: -16px;
	width: 25px;
	height: 25px;
	background-color: #dca143;	z-index: 0;
}

.box {
	width:80%;
	max-width:296px;
	border-radius:10px;
	background:#c7b69b;
	padding:2px;
	box-shadow:0px 0px 8px rgba(25,25,25,.8);
	margin:-28px auto 0;
	border:#ffb745 2px...