JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="events">
    <li class="events__item">
        <div>Name: pewpew</div>
        <div>Descripion: Ololo</div>
        <div>Start: 18.8.2005 12:00</div>
        <div>End: 18.8.2005 12:30</div>
        <div>Stars: *****</div>
    </li>
    <li class="events__item">
        <div>Name: pewpew</div>
        <div>Descripion: Ololo</div>
        <div>Start: 18.8.2005 12:00</div>
        <div>End: 18.8.2005 12:30</div>
        <div>Stars: *****</div>
    </li>
    <li class="events__item">
        <div>Name: pewpew</div>
        <div>Descripion: Ololo</div>
        <div>Start: 18.8.2005 12:00</div>
        <div>End: 18.8.2005 12:30</div>
        <div>Stars: *****</div>
    </li>
</ul>

<hr/>

<div class="filter">
    <label><input type="checkbox"/>Select future events</label>
    <label><input type="checkbox"/>Select my events</label>
    <div>Order by</div>
    <label><input type="radio" name="sort"/>Name</label>
    <label><input type="radio" name="sort"/>Description</label>
    <label><input type="radio" name="sort"/>Start</label>
    <label><input type="radio" name="sort"/>End</label>
    <label><input type="radio" name="sort"/>Stars</label>    
</div>

<hr/>

<form>
    <label>Name
        <input type="text"/>
    </label>
    
    <label>Description
        <textarea></textarea>
    </label>
    
    <label>Start
        <input type="date"/>
    </label>    
    
    <label>End
        <input type="date"/>
    </label>

    <label>Stars
        <select>
            <option>1 *</option>
            <option>2 *</option>
            <option>3 *</option>
            <option>4 *</option>
            <option>5 *</option>            
        </select>
    </label>
    
    <input type="submit" value="Add event"/>
</form>

CSS

label {
    display: block;
}

li {
    margin-bottom: 10px;
}