JSFiddle - React, Tailwind, and code Playground

by mr_mohsen_rasouli

HTML

<div class="contentAarea">
    <div class="content" id="1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis repellendus asperiores ad quibusdam debitis. Illo, qui obcaecati maxime ipsum enim recusandae blanditiis consectetur possimus debitis vero sit omnis expedita quibusdam.</p>
    </div>
    <div class="content" id="2">
        <p>Facilis, perferendis, totam est ipsum fugiat laudantium deleniti. Dolore, distinctio, iure veritatis aspernatur fugiat officia rerum maxime hic dolorem autem illo libero ex non dolorum sit. Doloribus sequi necessitatibus repellat.</p>
    </div>
    <div class="content" id="3">
        <p>Explicabo, totam, laboriosam quibusdam sapiente officiis soluta excepturi nisi exercitationem accusamus natus deserunt tempore? Molestias, quod, veritatis, soluta necessitatibus unde itaque ullam amet nesciunt porro obcaecati architecto recusandae beatae odio.</p>
    </div>
    <div class="content" id="4">
        <p>Nulla, aliquid, illo fugiat cum rerum nobis maxime molestias temporibus ab harum laborum neque quam qui vel sint officiis repudiandae facilis natus dolore quas reiciendis iste eum dolores itaque quibusdam!</p>
    </div>
    <div class="content" id="5">
        <p>Nisi, eum, eligendi, alias sapiente quaerat consectetur libero laudantium accusantium velit doloremque aut at facilis hic iure fuga rerum impedit blanditiis labore dignissimos molestias. Est voluptatibus fugit in dignissimos quam!</p>
    </div>
    <div class="content" id="6">
        <p>Harum, vel magnam totam magni quisquam! Delectus, architecto, culpa tempora quibusdam beatae reprehenderit possimus aut tenetur consectetur distinctio at temporibus unde fugit asperiores explicabo illo obcaecati. Saepe dolorem aut tempora.</p>
    </div>
    <div class="place">
        <div class="mark"></div>
    </div>
</div>

CSS

.contentAarea{
    width: 300px;
    height: 300px;
    background: #ddd;
    padding: 3px;
    overflow: hidden;
    overflow-y: scroll;
    position: relative;
}
.content {
    width: 250px;
    background: #eee;
    padding: 6px;
    margin: 5px auto;
    
}
.place {
    position: absolute;
    left: 30px;
    bottom: 30px;
}
.mark {
    height: 30px;
    width: 30px;
    background: red;
    position: fixed;
}

JavaScript

$('.contentAarea').on('mouseenter','.content',function(){
    var getId = $(this).attr('id');
    alert(getId);
    // some more ajax actions.
});