JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <a href="#" class="title">
        <p class="title_text">Slow Task</p>
        <div class="arrow arrow_up"></div>
    </a>
    <div class="box_expand" style="display: block;">
        <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
    </div>
</div>
<div class="box">
    <a href="#" class="title">
        <p class="title_text">Different type of Task</p>
        <div class="arrow"></div>
    </a>
    <div class="box_expand">
        <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
    </div>
</div>
<div class="box">
    <a href="#" class="title">
        <p class="title_text">Quick Tasks</p>
        <div class="arrow"></div>
    </a>
    <div class="box_expand">
        <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</p>
    </div>
</div>

CSS

a, p {
    margin: 0;
    padding: 0;
}
.box {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    width: 100%;
    float: left;
}
.title {
    width: 100%;
    float: left;
}
.title_text {
    float: left;
}
.arrow {
    width: 24px;
    height: 16px;
    float: left;
    background-image: url(https://drupal.org/files/libricons-grid.png);
    background-position: -493px -437px;
    margin: 5px 0 0 5px;
}
.box_expand {
    width: 100%;
    float: left;
    display: none;
}
.arrow_up {
    background-position: -365px -435px;
}

JavaScript

$('.title').click(function() {
    $(this).children('.arrow').toggleClass('arrow_up');
	$(this).next('.box_expand').slideToggle();
 });