JSFiddle - React, Tailwind, and code Playground

by Austin French

HTML

<div class="fancy-div" onclick="fancyClick(this)">
  <div class="fancy-content">
  The things! 🐱‍🏍
  </div>
  
  <button type="button" class="fancy-button">
  Click me
  </button>
</div>

<div class="fancy-div" onclick="fancyClick(this)">
  <div class="fancy-content">
  Cake 🎂
  </div>
  
  <button type="button" class="fancy-button">
  Click me
  </button>
</div>

<div class="fancy-div" onclick="fancyClick(this)">
  <div class="fancy-content">
  Steamy 😤
  </div>
  
  <button type="button" class="fancy-button">
  Click me
  </button>
</div>

CSS

.fancy-div {
    display: flex;
    border-style: solid;
    border-color: red;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px 5%;
    margin: 10px;
}

.fancy-div:hover {
  background-color: lightgray;
}

.fancy-content {
  float: left;
  width: 90%;
}

.fancy-button {
  float: right;
}

.clicked {
  border-color: orange;
  color: gray;
}

JavaScript

function fancyClick(elem){
	console.log(elem);
  
  elem.classList.toggle('clicked');
}