JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<div class="material-block priority-selector">
    <div class="material-block first">1</div>
    <div class="material-block second">2</div>
</div>
    
<green></green>
<red></red>

CSS

.material-block {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 1.5px rgba(0,0,0,0.2);
    display: block;
    border-radius: 3px;
    -webkit-transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); 
}

.priority-selector {
    max-width: 960px;
    height: 360px;
    width: 80%;
    margin: auto;
}
.first {
}
.second {
}

.priority {
    height: 61.803398875%;
    width: 30.90169944%;
    max-width: 30.90169944%;
    position: absolute;
    display: inline-block;
}
.priority:hover {
    background: #000;
}

JavaScript

var projects = {
    "Сформировать пакет документов по новой услуге: Pro TM CRM для крупных компаний - для конкретной отрасли",
    "Пройтись по характеристикам ТМ и продуктов на главной странице сайта ТМ, выбрать ключевое, остальное убрать",
    "Семейные фотографии",
    "Новый облачный хостинг",
    "Реклама и поддержка Метр27",
    "Сделать приложения iOS по плану Фейсбука",
    "Выиграть премию \"Бизнес Успех\"",
    "Learn The power of NO!",
    "NFC платежи внедрить в регионе",
    "Entering the international (English-speaking) market of information technologies and services",
    "NFC платежи внедрить в регионе"
};