JSFiddle - React, Tailwind, and code Playground

by motioncrafter

HTML

<span>Delete File
<div class="confirm">Are you sure?
  <div class="yes">
   Yes
  </div>
  <div class="no">
   No
  </div>
</div>
</span>

CSS

.confirm {
  display: none;
  background-color: white;
  padding: 20px;
  width: 200px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.yes {
  padding: 10px 0px;
  cursor: pointer;
  background-color: green;
}

.no {
  padding: 10px 0px;
  cursor: pointer;
  background-color: red;
}

JavaScript

$('span').click(function () {
	$('.confirm').fadeIn(100);
});

$('.no').click(function () {
	$('.confirm').fadeOut(100);
})