JSFiddle - React, Tailwind, and code Playground

by padma rubhan

HTML

<div class="modal-payment__background">
    <div class="modal-payment__wrapper">
        <div class="modal__header">
            <div>
               <span>Text</span> 
         
            <div class="modal__header__x"
                @click="closeModal">
                x
            </div>
               </div>
        </div>
        <div class="modal__body">
        </div>
        </div>
        </div>

CSS

.modal-payment__wrapper {          // <- this is the whole box
    max-width: 50%;
    width: 500px;
    height: 200px;
    background: white;
    font-family: 'Lato', 'sans-serif';

}

.modal__header {                  // <- this is the header
   // display: flex;
  //  justify-content: center;
  //  flex-direction: column;
    width: 100%;
    vertical-align: center;
    height: auto;
    background-color: black;
    color: white;
    font-size: 16px;
    padding-left: 20px;
    padding: 10px
}
span{
  padding: 15px;
  margin-top: 15px
}
.modal__header__title {          // <- this is "text"
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.7em;
    padding: 10px;
    flex-grow: 0;
    flex-srhink: 0;
    flex-basis: auto;
    align-self: auto;
}
.modal__header__x{
float: right;
}