JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="action-container">
  <a href="#" class="bookmark">
    <i class="fa-regular fa-bookmark active"></i>
  </a>
  <div class="bookmark-update">
    Your item has been saved. <a href="#">View your saved posts.</a>
  </div>
</div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="action-container">
  <a href="#" class="bookmark">
    <i class="fa-regular fa-bookmark active"></i>
  </a>
  <div class="bookmark-update">
    Your item has been saved. <a href="#">View your saved posts.</a>
  </div>
</div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="action-container">
  <a href="#" class="bookmark">
    <i class="fa-regular fa-bookmark active"></i>
  </a>
  <div class="bookmark-update">
    Your item has been saved. <a href="#">View your saved posts.</a>
  </div>
</div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="action-container">
  <a href="#" class="bookmark">
    <i class="fa-regular fa-bookmark active"></i>
  </a>
  <div class="bookmark-update">
    Your item has been saved. <a href="#">View your saved...

CSS

.action-container{
  position: relative;
  margin: 40px 0;
  border: solid 2px;
  padding: 10px;
  text-align: right;
}
.active{
  color: red;
}
.bookmark-update{
  position: absolute;
  width: 100%;
  background: #fff;
  bottom: 100%;
  left: 0;
  display: block;
  text-align: left;
}

JavaScript

function autoCloseElement(element){
	setTimeout(function(){
  	element.style.display = 'none';
  }, 3000)
}

// function to handle bookmark click
	
  // get the 'i' element
  
  // check if it has 'active' class name
  
  // if true, disable bookmark
  
  	// remove 'active' class name from 'i'
  
  // else, enable bookmark
  
  	// add 'active' class name in 'i'
    // get '.bookmark-update' element (bookmarkUpdateEle)
    // show '.bookmark-update' element (style.display = 'block')
		// autoCloseElement(bookmarkUpdateEle)


// get all bookmark elements (HTML Collection)

// iterate the HTML Collection

	// add click event listener for each bookmark element