JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <div id="inspektion" class="col-lg-3 lightblue-bg topbottompadding text-center">
      <object id="inspektion-svg" data="https://placeholder.pics/svg/150" type="image/svg+xml">

        <!---Fallback--->
        Ihr Browser kann leider kein svg darstellen.
      </object>
      <p id="inspektion-title" class="midblue text-center textsize35-vw upper nopadding">Category I</p>
      <p id="inspektion-text" class="midblue text-center textsize25-vw upper nopadding">Lorem ipsum dolor sit amet consectetur adipiscing elit, habitasse dignissim lacus ullamcorper augue himenaeos.</p>
    </div>

    <div id="bremsen" class="col-lg-3 midblue-bg topbottompadding text-center">
      <object id="bremsen-svg" data="https://placeholder.pics/svg/150" type="image/svg+xml">

        <!---Fallback--->
        Ihr Browser kann leider kein svg darstellen.
      </object>
      <p id="bremsen-title" class="lightblue text-center textsize35-vw upper nopadding">Category II</p>
      <p id="bremsen-text" class="lightblue text-center textsize25-vw upper nopadding">Lorem ipsum dolor sit amet consectetur adipiscing elit, habitasse dignissim lacus ullamcorper.</p>
    </div>

    <div id="tuev" class="col-lg-3 lightblue-bg topbottompadding text-center">
      <object id="tuev-svg" data="https://placeholder.pics/svg/150" type="image/svg+xml">

        <!---Fallback--->
        Ihr Browser kann leider kein svg darstellen.
      </object>
      <p id="tuev-title" class="midblue text-center textsize35-vw...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$("#inspektion-text").hide();
$("#inspektion").click(function() {
  $("#inspektion-text").toggle();
  $("#inspektion-title").toggle();
  $("#inspektion-svg").toggle();
});

$("#bremsen-text").hide();
$("#bremsen").click(function() {
  $("#bremsen-text").toggle();
  $("#bremsen-title").toggle();
  $("#bremsen-svg").toggle();
});

$("#tuev-text").hide();
$("#tuev").click(function() {
  $("#tuev-text").toggle();
  $("#tuev-title").toggle();
  $("#tuev-svg").toggle();
});

$("#wintercheck-text").hide();
$("#wintercheck").click(function() {
  $("#wintercheck-text").toggle();
  $("#wintercheck-title").toggle();
  $("#wintercheck-svg").toggle();
});

$("#lack-text").hide();
$("#lack").click(function() {
  $("#lack-text").toggle();
  $("#lack-title").toggle();
  $("#lack-svg").toggle();
});

$("#unfall-text").hide();
$("#unfall").click(function() {
  $("#unfall-text").toggle();
  $("#unfall-title").toggle();
  $("#unfall-svg").toggle();
});

$("#reparaturen-text").hide();
$("#reparaturen").click(function() {
  $("#reparaturen-text").toggle();
  $("#reparaturen-title").toggle();
  $("#reparaturen-svg").toggle();
});

$("#klima-text").hide();
$("#klima").click(function() {
  $("#klima-text").toggle();
  $("#klima-title").toggle();
  $("#klima-svg").toggle();
});

$("#oldtimer-text").hide();
$("#oldtimer").click(function() {
  $("#oldtimer-text").toggle();
  $("#oldtimer-title").toggle();
  $("#oldtimer-svg").toggle();
});

$("#batterie-text").hide();
$("#batterie").click(function() {
  $("#batterie-text").toggle();
  $("#batterie-title").toggle();
  $("#batterie-svg").toggle();
});

$("#oelwechsel-text").hide();
$("#oelwechsel").click(function() {
  $("#oelwechsel-text").toggle();
  $("#oelwechsel-title").toggle();
  $("#oelwechsel-svg").toggle();
});

$("#sonstiges-text").hide();
$("#sonstiges").click(function() {
  $("#sonstiges-text").toggle();
  $("#sonstiges-title").toggle();
  $("#sonstiges-svg").toggle();
});