JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<div class="rog-filter__search">

    <div class="rog-filter__search-container">
        <label for="rog-filter__search--input">Sök:</label>
        <div class="rog-filter__search--input-container">
            <input type="text" id="rog-filter__search--input" name="rog-filter__search--input" aria-label="Sök">
            <button>Sök</button>
        </div>

        <div class="rog-filter__suggestions">
            <span>Menade du:</span><a href="#">Vård</a>
        </div>
    </div>


    <div class="rog-filter__search-popular">

        <label>Sök:</label>
        <ul class="rog-filter__search-popular__tab">
            <li>
                <a class="rog-filter__search-popular__tab--link" href="#">Exempellänk 1</a>
            </li>
            <li>
                <a class="rog-filter__search-popular__tab--link" href="#">Exempellänk 2</a>
            </li>
            <li>
                <a class="rog-filter__search-popular__tab--link" href="#">Exempellänk 3</a>
            </li>
            <li>
                <a class="rog-filter__search-popular__tab--link" href="#">Exempellänk 4</a>
            </li>
            <li>
                <a class="rog-filter__search-popular__tab--link" href="#">Exempellänk 5</a>
            </li>
        </ul>

    </div>


</div>


<ul class="rog-filter__tabs">
    <li>
        <a class="rog-filter__tab--link active" href="#">Allt</a>
    </li>
    <li>
        <a class="rog-filter__tab--link" href="#">Person och organisation</a>
    </li>
    <li>
        <a class="rog-filter__tab--link" href="#">Styrande dokument</a>
    </li>
    <li>
        <a class="rog-filter__tab--link" href="#">Information och nyheter</a>
    </li>
    <li>
        <a class="rog-filter__tab--link" href="#">Grupper</a>
    </li>
    <li>
        <a class="rog-filter__tab--link disabled" href="#">Lediga jobb</a>
    </li>
</ul>

<div class="rog-filter--container">


    <div class="rog-filter__options">
        <div class="rog-filter__options--inner">
...

CSS

/* SEARCH */

.rog-filter__search {
	display: flex;
	margin-bottom: 20px;
}

.rog-filter__search label {
	display: block;
	margin-bottom: 7px;
}

.rog-filter__search-container,
.rog-filter__search-popular {
	width: 50%;
}

.rog-filter__search--input-container {
	position: relative;
	display: inline-block;
	margin-bottom: 5px;
}

.rog-filter__search input {
	padding: 10px;
	padding-right: 40px;
	border: 2px solid #5f4b8b;
}

.rog-filter__search button {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	font-size: 0;
	width: 40px;
	padding: 0;
	margin: 0;
}

.rog-filter__suggestions {
	display: flex;
}

.rog-filter__suggestions span {
	color: #97959b;
	margin-right: 5px;
}

.rog-filter__suggestions a {
	font-style: italic;
}

/* POPULAR LINKS */
.rog-filter__search-popular ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}

.rog-filter__search-popular ul li a {
	display: block;
	margin-right: 10px;
	background: #ebe5ff;
	color: #5f4b8b;
	text-decoration: none;
	padding: 7px 10px;
	border-radius: 4px;
}

/* TABS */
.rog-filter__tabs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	background: #f7f7f8;
	margin-bottom: 20px;
}

ul.rog-filter__tabs li a {
	padding: 15px 20px;
	display: block;
	text-decoration: none;
	color: #322e39;
}

ul.rog-filter__tabs li a.active {
	background: #5f4b8b;
	color: #fff;
}

ul.rog-filter__tabs li a.disabled {
	color: #a0a0a0;
	background: transparent;
	cursor: no-drop;
}


/* FILTER CONTAINER */

.rog-filter--container {
	display: flex;
}


/* Filter - options */
.rog-filter__options {
	width: 30%;
	padding-right: 40px;
	box-sizing: border-box;
}

.rog-filter__options--inner {
	background: #f7f7f8;
	padding: 20px 15px;
}

.rog-filter__options-search--list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.rog-filter__sort-letters {
	margin-right: auto;
}

.rog-filter__options--header {
	display: flex;
}
.rog-filter__options--toggle {
	margin-left:...

JavaScript

// TOGGLE "FAVORITE LINK"
$('.rog-filter__options--toggle').click(function() {

    // Toggle
    $(this).closest('.rog-filter__options--header').next().slideToggle('fast');

    //change expanded-status
    $(this).closest('.rog-filter__options--header').attr("aria-expanded", function(i, attr) {
        return attr === 'true' ? 'false' : 'true';
    });

});