JSFiddle - React, Tailwind, and code Playground

by simoncunningham

HTML

<div class="box">
            <div class="tile" onclick="openTab('b1', event);">
              <img class="icon-spacing" src="./assets/Icons/Banking.svg" />
              <p>Banking</p>
              <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
            </div>
            <div
              id="b1"
              class="content"
              style="display: none; background: #222"
            >
              <span
                onclick="this.parentElement.style.display='none'"
                class="closebtn"
                >&times;</span
              >
              <div class="description">
                <h3>Banking</h3>
                <p>
                  The largest category covering investment and management
                  platforms, sales and trading analysis toosl, personal finance
                  management & crypto exchanges.
                </p>
                <ul>
                  <li>Personal Finance Management (PFM)</li>
                  <li>Investment Data and Information Services</li>
                  <li>Trading and Investment Platforms</li>
                  <li>WealthTech Operations</li>
                  <li>Distributed Ledger Technologies & Cryptocurrencies</li>
                  <li>Robo Advisors</li>
                </ul>
              </div>
            </div>
            <div class="tile" onclick="openTab('b2', event);">
              <img class="icon-spacing" src="./assets/Icons/Regtech.svg" />
              <p>RegTech</p>
              <img class="arrow-down" src="./assets/Icons/arrow-down.png" />
            </div>
            <div
              id="b2"
              class="content"
              style="display: none; background: #222"
            >
              <span
                onclick="this.parentElement.style.display='none'"
                class="closebtn"
                >&times;</span
              >
              <div class="description">
                <h3>RegTech</h3>
               ...

CSS

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-right: 6rem;
  padding-left: 6rem;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile > * {
  pointer-events: none;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  background-color: #222;
  border: 1px solid grey;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: white;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: white;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.specialisms-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* 
  "Desktop" and above
 */
@media (max-width: 480px) {
  .box {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .content {
    order: 0;
  }
}

@media (max-width: 768px) {
  .box {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

JavaScript

function openTab(tabName, event) {
              event.target.classList.add("active-tile");
              event.target.children[2].classList.add("arrow-up");
              var i, x;
              x = document.getElementsByClassName("content");
              for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
              }
              document.getElementById(tabName).style.display = "block";

              // Get all the tabs into a collection
              // (don't use .getElementsByClassName()!)
              let tabs = document.querySelectorAll(".tile");

              // Set up a click event handler on each of the tabs
              tabs.forEach(function (tab) {
                tab.addEventListener("click", function (event) {
                  // Loop over all the tabs and remove the active class
                  tabs.forEach(function (tab) {
                    tab.classList.remove("active-tile");
                    tab.children[2].classList.remove("arrow-up");
                  });

                  // Set the background of the clicked tab
                  this.classList.add("active-tile");
                  tab.children[2].classList.add("arrow-up");
                });
              });
            }