JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
			<ul>
				<li id="One"><a href="#One" id="first">Premier onglet</a>
					<div>
						<p>Texte 1er onglet
						 <span class="marge">&nbsp;</span></p>
</div>
				</li>
				<li id="Two"><a href="#Two" id="sec">Deuxième onglet</a>
					<div>
						<p>Texte 2eme onglet</p>
						</div>
				</li>
				<li id="Three"><a href="#Three" id="third">Troisième onglet</a>
					<div>
						<p>Texte 3eme onglet</p>
						</div>
				</li>
				<li id="Four"><a href="#Four" id="Fourth">Quatrième onglet</a>
					<div>
						<p>Texte 4eme onglet</p>
						</div>
				</li>
				
				<li id="Six"><a href="#Six" id="Sixth">Cinquième onglet</a>
					<div>
						<p>Texte 5eme onglet
						<span class="marge">&nbsp;</span></p>
						</div>
				</li>
			</ul>
		</div>

CSS

.marge {
margin-left: 52em;
}
#bar {
	position: fixed;
	width: 100%;
	top: 0;
}

#content > p {
	font-size: 13px;
	
	text-align: left;
	color: #416C80;
}

li div p {
	font-size: 13px;
	line-height: 24px;
	text-align: left;
	color: #000000;
}

a {
	color: #000000;
	text-decoration: none;
	outline: none;
}

#tabs-content {
	position: relative;
	clear: both;
}

li div {
	-webkit-transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	border: 3px solid #565552;
	float: left;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	padding: 0 15px;
	position: absolute;
	width: auto;
	left: 0;
	background: no-repeat, -moz-linear-gradient(top,  #E3E3E3 0%, #FFFFFF 100%); /* FF3.6+ */
	background: no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E3E3E3), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
	background: no-repeat, -webkit-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
	background: no-repeat, -o-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 100%); /* Opera 11.10+ */
	background: no-repeat, -ms-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 100%); /* IE10+ */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#E3E3E3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E3E3E3', endColorstr='#FFFFFF', GradientType=0 ); /* IE6-9 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#E3E3E3', EndColorStr='#FFFFFF')"; /* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorStr='#E3E3E3', EndColorStr='#0FFFFFF')"; /* IE */
background: no-repeat, linear-gradient(to bottom,  #E3E3E3 0%,#FFFFFF 100%); /* W3C */
  
}
li#One div{
    opacity:1;
}


#tabs {
overflow: visible;
	margin:0px 0px 0px 19px;
	min-height: 200px;
	width: 807px;
}

ul...