JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<div class="settings-notification"
   id="settings-notification">
<div class="tr triangle">
<div class="tr inner-triangle"></div>
</div>
<div class="sound-signal">
  Signal sonore :
  <input type="radio" name="soundsignal" id="soundsignal">
  <label for="soundsignal">Oui</label>
  <input type="radio" name="soundsignal">
  <label for="soundsignal">Non</label>
</div>

<div class="flash-signal">
  Signal visuel :
  <input type="radio" name="flashsignal" id="flashsignal">
  <label for="flashsignal">Oui</label>
  <input type="radio" name="flashsignal">
  <label for="flashsignal">Non</label>
</div>

CSS

.settings-notification {
position: relative;
width:auto;
display: inline-block;
background: white;
box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 6px 9px rgba(0,0,0,.2);
padding: 4px;
margin-top: 50px;
margin-left: 50px;
}

.tr {
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.triangle {
  z-index:2;
  border-bottom: 20px solid #ccc;
  top: -20px;
  right: 6px;
}

.inner-triangle {
  z-index:1;
  border-bottom: 23px solid #ffffff;
  right: -10px;
}