JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="cont">
   <div class="dimond"></div>
</div>

CSS

/* По одной координате относительные единицы, по-другой - абсолютные.
Можно ли получить ромбик? */
.cont
    {
      width: 500px;
      margin: 100px auto;
/*      background: RGBA(255, 245, 135, .3);*/
      position: relative;
    }
.dimond
    {
      width: 50%;
      position: absolute;
      left: calc(50% - 50%/2);
      height: 150px;
      background: #FBA;
    }