JSFiddle - React, Tailwind, and code Playground

by herde2

HTML

<div id="lienchien"></div>
				<div class="cbp-so-section">
					<div class="cbp-so-side cbp-so-side-left cbp_chien">
          <div id= "chien">
							<img class="" src="imgs/fond_bleu.jpg" alt="fond">
							<div class="rond">
								<div class="circle one"></div>
								<div class="circle two"></div>
								<div class="circle three"></div>
								<div class="chien">
									<img src="https://www.thepaws.net/wp-content/uploads/2019/01/grey-tabby-cat-4-192x192.jpg" alt="img03">
								</div>
							</div>
						</div>
					</div>
					<article class="cbp-so-side cbp-so-side-right">
          <h1>Titre chien</h1>
						<p>
Texte
						</p>
						<a href="./DrVonKlafout.html" target="_blank" class="btnorange">aller voir</a>
					</article>
				</div>
				<div class="klafout"></div>
				<a class="chevron-next scrollTo" href="#section3"><i class="fa fa-chevron-down fa-2x"></i></a>
			</div>

CSS

.chien
{
	margin-top: 15%;
	width: 40%;
	margin-left:10em;
	position: relative;
	-webkit-animation: logoAp 3s 1;
	-moz-animation: logoAp 3s 1;
	-ms-animation: logoAp 3s 1;
	-o-animation: logoAp 3s 1;
	animation: logoAp 3s 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.chien:hover
{
	margin-top: 0%;
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
	-ms-transform: scale(3);
	-o-transform: scale(3);
	transform: scale(3);
}

.klafout
{
	margin-bottom: 40px;
}

@keyframes circle
{
	from
	{
	transform: scale(0)}

	to
	{
	transform: scale(8)}
}

.circle
{
	margin: 0 auto;
	width: 40%;
	height: 50%;
	border: 10px solid #000000;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	left: 50%;
	overflow-y: hidden;
}

.fond
{
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

.one
{
	animation: circle 6s infinite linear;
}

.two
{
	animation: circle 5s infinite linear;
}

.three
{
	animation: circle 4s infinite linear;
}

.rond
{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}