JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<div class="parent">
  <div class="child1">
    <span class="inner">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
    </span>
  </div>
</div>

CSS

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  /* background: red; */
}

.child1 {
  background: pink!important;
  border: 1px solid green;
  height: 4.5vh;
  width: 60vh;
  margin: 0 auto;
}
button {
  background: transparent;
  border: 1.5px solid purple;
  color: white;
  justify-content: space-between;
}
button:hover {
  background: lightblue;
}
button:active, button:focus {
  border: 1px solid orange;
  outline: none;
}
.inner {
  padding: -55px;
}

JavaScript

/* var words= ['ht','etsg','reg',' '] ;

alert((word = words.pop()));
while ((word = words.pop())) {
console.log('not empty '+word);
}

console.log('empty');

 */
 
 var txt = ['<p>as</p>','<a href="dsas">sd</a>'];
for()