JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://colorpicker.ueberflie.ga/css/app-dark.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="container my-3">
  <!--div id="test" class=""></div-->

  <div class="row">
    <div class="col-lg-4 col-xl-3">
      <!-- Simple card -->
      <div class="card">
        <img class="card-img-top img-fluid" src="https://i.imgur.com/o4cZMqu.pngg" alt="Weizen">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make
            up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.</p>
          <a href="javascript:void(0);" class="btn btn-primary waves-effect waves-light">Button</a>
        </div>
      </div>
    </div><!-- end col -->

    <div class="col-lg-4 col-xl-3">
      <div id="card2" class="card">
        <img class="card-img-top img-fluid" src="https://i.imgur.com/TMmzjgi.png" alt="Skyline">
        <div class="card-body">
          <p class="card-text">Some quick example text to build on the card title and make
            up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.</p>
          <button id="ani_margintop" class="btn btn-primary waves-effect waves-light">Animation</button>
					<button id="ani_margintop2" class="btn btn-primary waves-effect waves-light">Back</button>
        </div>
      </div>
    </div><!-- end col -->

    <div class="col-lg-4  col-xl-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle text-muted">Support card subtitle</h6>
        </div>
        <img class="img-fluid" src="https://i.imgur.com/V8c2grX.png" alt="Space">
        <div class="card-body">
 ...

CSS

.ani_margintop {
  /*width: 320px;
  animation: ani_margintop 2s ease-in-out;*/
  animation: ani_margintop .2s ease-in-out 1;
	margin-top: 300px;
}

.ani_margintop2 {
  /*width: 320px;
  animation: ani_margintop 2s ease-in-out;*/
  animation: ani_margintop2 .2s ease-out 1;
	margin-top: 0px;
}

@keyframes ani_margintop {
  from {margin-top: 0px;}
  to {margin-top: 300px;}
}

@keyframes ani_margintop2 {
  from {margin-top: 300px;}
  to {margin-top: 0px;}
}

/*
.ani_margintop {
  margin-top: 300px
    
}
  from {margin-top: 0px;}
  to {margin-top: 300px;}
}
*/
}

JavaScript

$("#ani_margintop").click(function() {
  $("#card2").removeClass("ani_margintop2").addClass("ani_margintop");

})

$("#ani_margintop2").click(function() {
  $("#card2").removeClass("ani_margintop").addClass("ani_margintop2");

})