Tools
Code Snippets
HTML Entity
About
Contact Us
Choose and Remove Multiple Users using HTML, CSS and JS
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Choose and Remove Multiple User using HTML, CSS and JS</title> </head> <body> <div class="main-div-area"> <div class="top-selected-users-main-div"> <p>To:</p> <div class="all-tags-div"> </div> </div> <div class="users-checkboxes-main-div"> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Vikash Gupta</p> <p class="address">(Artitechture)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_1" class="check-box-label"> <input type="checkbox" id="user_checkbox_1" data-username="Vikash Gupta" data_id="1" hidden> <label for="user_checkbox_1"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Piyush Singh</p> <p class="address">(Doctor)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_2" class="check-box-label"> <input type="checkbox" id="user_checkbox_2" data-username="Piyush Singh" data_id="2" hidden> <label for="user_checkbox_2"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671252.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Disha Gupta</p> <p class="address">Manager</p> </div> </div> <div class="right-div"> <label for="user_checkbox_3" class="check-box-label"> <input type="checkbox" id="user_checkbox_3" data-username="Disha Gupta" data_id="3" hidden> <label for="user_checkbox_3"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671341.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Rohini Sharma</p> <p class="address">(Automobile Enginner)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_4" class="check-box-label"> <input type="checkbox" id="user_checkbox_4" data-username="Rohini Sharma" data_id="4" hidden> <label for="user_checkbox_4"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Rahul kanaujia</p> <p class="address">(Civil Enginner)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_5" class="check-box-label"> <input type="checkbox" id="user_checkbox_5" data-username="Rahul kanaujia" data_id="5" hidden> <label for="user_checkbox_5"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671291.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Ankur Gupta</p> <p class="address">(Busineesman)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_6" class="check-box-label"> <input type="checkbox" id="user_checkbox_6" data-username="Ankur Gupta" data_id="6" hidden> <label for="user_checkbox_6"> <div class="check"></div> </label> </label> </div> </div> </div> <div class="send-msg-btn"> <button class="form-control"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none"> <path d="M11 0C4.92059 0 0 4.69613 0 10.5C0 12.3417 0.503204 14.1405 1.45876 15.7269L0.0414581 19.9281C-0.0574036 20.221 0.0238342 20.5421 0.25177 20.7597C0.477524 20.9752 0.813049 21.0556 1.12289 20.9604L5.52417 19.6076C7.18619 20.5197 9.0706 21 11 21C17.0794 21 22 16.3039 22 10.5C22 4.69693 17.0802 0 11 0ZM11 19.3594C9.25725 19.3594 7.55847 18.8952 6.0873 18.0171C5.87564 17.8908 5.61279 17.8567 5.36824 17.9318L2.19107 18.9085L3.21426 15.8758C3.29181 15.6457 3.25908 15.3945 3.1248 15.1894C2.205 13.7851 1.71875 12.1635 1.71875 10.5C1.71875 5.61497 5.88235 1.64062 11 1.64062C16.1176 1.64062 20.2812 5.61497 20.2812 10.5C20.2812 15.385 16.1176 19.3594 11 19.3594ZM12.0742 10.5C12.0742 11.0662 11.5933 11.5254 11 11.5254C10.4067 11.5254 9.92578 11.0662 9.92578 10.5C9.92578 9.93363 10.4067 9.47461 11 9.47461C11.5933 9.47461 12.0742 9.93363 12.0742 10.5ZM16.3711 10.5C16.3711 11.0662 15.8902 11.5254 15.2969 11.5254C14.7035 11.5254 14.2227 11.0662 14.2227 10.5C14.2227 9.93363 14.7035 9.47461 15.2969 9.47461C15.8902 9.47461 16.3711 9.93363 16.3711 10.5ZM7.77734 10.5C7.77734 11.0662 7.29646 11.5254 6.70312 11.5254C6.10995 11.5254 5.62891 11.0662 5.62891 10.5C5.62891 9.93363 6.10995 9.47461 6.70312 9.47461C7.29646 9.47461 7.77734 9.93363 7.77734 10.5Z" fill="white" /> </svg> Send Message</button> </div> </div> </body> </html>
Copied
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Choose and Remove Multiple User using HTML, CSS and JS</title> </head> <body> <div class="main-div-area"> <div class="top-selected-users-main-div"> <p>To:</p> <div class="all-tags-div"> </div> </div> <div class="users-checkboxes-main-div"> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Vikash Gupta</p> <p class="address">(Artitechture)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_1" class="check-box-label"> <input type="checkbox" id="user_checkbox_1" data-username="Vikash Gupta" data_id="1" hidden> <label for="user_checkbox_1"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Piyush Singh</p> <p class="address">(Doctor)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_2" class="check-box-label"> <input type="checkbox" id="user_checkbox_2" data-username="Piyush Singh" data_id="2" hidden> <label for="user_checkbox_2"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671252.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Disha Gupta</p> <p class="address">Manager</p> </div> </div> <div class="right-div"> <label for="user_checkbox_3" class="check-box-label"> <input type="checkbox" id="user_checkbox_3" data-username="Disha Gupta" data_id="3" hidden> <label for="user_checkbox_3"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671341.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Rohini Sharma</p> <p class="address">(Automobile Enginner)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_4" class="check-box-label"> <input type="checkbox" id="user_checkbox_4" data-username="Rohini Sharma" data_id="4" hidden> <label for="user_checkbox_4"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671093.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Rahul kanaujia</p> <p class="address">(Civil Enginner)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_5" class="check-box-label"> <input type="checkbox" id="user_checkbox_5" data-username="Rahul kanaujia" data_id="5" hidden> <label for="user_checkbox_5"> <div class="check"></div> </label> </label> </div> </div> <div class="each-users-checkboxes-div"> <div class="left-div"> <div class="user-img-div"> <img src="https://www.teknowize.com/attachments/file_1658671291.png" alt="User"> </div> <div class="para-div"> <p class="name museo-400">Ankur Gupta</p> <p class="address">(Busineesman)</p> </div> </div> <div class="right-div"> <label for="user_checkbox_6" class="check-box-label"> <input type="checkbox" id="user_checkbox_6" data-username="Ankur Gupta" data_id="6" hidden> <label for="user_checkbox_6"> <div class="check"></div> </label> </label> </div> </div> </div> <div class="send-msg-btn"> <button class="form-control"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none"> <path d="M11 0C4.92059 0 0 4.69613 0 10.5C0 12.3417 0.503204 14.1405 1.45876 15.7269L0.0414581 19.9281C-0.0574036 20.221 0.0238342 20.5421 0.25177 20.7597C0.477524 20.9752 0.813049 21.0556 1.12289 20.9604L5.52417 19.6076C7.18619 20.5197 9.0706 21 11 21C17.0794 21 22 16.3039 22 10.5C22 4.69693 17.0802 0 11 0ZM11 19.3594C9.25725 19.3594 7.55847 18.8952 6.0873 18.0171C5.87564 17.8908 5.61279 17.8567 5.36824 17.9318L2.19107 18.9085L3.21426 15.8758C3.29181 15.6457 3.25908 15.3945 3.1248 15.1894C2.205 13.7851 1.71875 12.1635 1.71875 10.5C1.71875 5.61497 5.88235 1.64062 11 1.64062C16.1176 1.64062 20.2812 5.61497 20.2812 10.5C20.2812 15.385 16.1176 19.3594 11 19.3594ZM12.0742 10.5C12.0742 11.0662 11.5933 11.5254 11 11.5254C10.4067 11.5254 9.92578 11.0662 9.92578 10.5C9.92578 9.93363 10.4067 9.47461 11 9.47461C11.5933 9.47461 12.0742 9.93363 12.0742 10.5ZM16.3711 10.5C16.3711 11.0662 15.8902 11.5254 15.2969 11.5254C14.7035 11.5254 14.2227 11.0662 14.2227 10.5C14.2227 9.93363 14.7035 9.47461 15.2969 9.47461C15.8902 9.47461 16.3711 9.93363 16.3711 10.5ZM7.77734 10.5C7.77734 11.0662 7.29646 11.5254 6.70312 11.5254C6.10995 11.5254 5.62891 11.0662 5.62891 10.5C5.62891 9.93363 6.10995 9.47461 6.70312 9.47461C7.29646 9.47461 7.77734 9.93363 7.77734 10.5Z" fill="white" /> </svg> Send Message</button> </div> </div> </body> </html>
CSS
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } .main-div-area { max-width: 575px; width: 100%; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); border-radius: 10px; } .main-div-area .top-selected-users-main-div { display: flex; align-items: center; gap: 15px; padding: 12px 25px; border-bottom: 1px solid #e1e1e1; } .main-div-area .top-selected-users-main-div P { color: #59544a; font-size: 15px; font-weight: 400; margin: 0; } .main-div-area .top-selected-users-main-div .all-tags-div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .main-div-area .top-selected-users-main-div .all-tags-div span { border-radius: 4px; background: #e0e0e0; padding: 4px 10px; display: flex; align-items: center; gap: 10px; } .main-div-area .top-selected-users-main-div .all-tags-div span svg { cursor: pointer; } .main-div-area .heading { padding: 15px 25px; color: #59544a; font-size: 12px; font-weight: 700; margin: 0; } .main-div-area .users-checkboxes-main-div { margin-top: 15px; overflow-y: auto; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div { display: flex; align-items: center; justify-content: space-between; padding: 6px 25px; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div:hover { background: #efefef; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div { display: flex; align-items: center; gap: 15px; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div { width: 36px; height: 35px; border-radius: 50%; overflow: hidden; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div img { width: 100%; height: 100%; object-fit: cover; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.name { color: #2c2c2c; font-size: 16px; margin: 0; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.address { color: #9da1ac; font-size: 13px; font-weight: 400; margin: 0; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label { width: 31px; height: 31px; border-radius: 50%; background-color: #dcdcdc; display: flex; align-items: center; justify-content: center; cursor: pointer; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label .check { display: inline-block; transform: rotate(45deg); height: 15px; width: 9px; border-bottom: 2.5px solid #fff; border-right: 2.5px solid #fff; margin-bottom: 4px; border-radius: 0.2px; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label input:checked ~ label { background: linear-gradient(270deg, #24e01e 0%, #3160c5 100%); } .main-div-area .send-msg-btn { padding: 15px; margin-top: 5px; } .main-div-area .send-msg-btn button { border-radius: 8px; background: var(--gradient, linear-gradient(270deg, #2ebb0a 0%, #3176c5 100%)); height: 50px; border: none; box-shadow: none; outline: none; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-family: "Museo Sans Rounded 400"; font-size: 16px; font-weight: 400; margin-inline: auto; padding-inline: 25px; cursor: pointer; } .main-div-area .send-msg-btn button:hover { background: linear-gradient(270deg, #3176c5 0%, #2ebb0a 100%); }
Copied
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } .main-div-area { max-width: 575px; width: 100%; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); border-radius: 10px; } .main-div-area .top-selected-users-main-div { display: flex; align-items: center; gap: 15px; padding: 12px 25px; border-bottom: 1px solid #e1e1e1; } .main-div-area .top-selected-users-main-div P { color: #59544a; font-size: 15px; font-weight: 400; margin: 0; } .main-div-area .top-selected-users-main-div .all-tags-div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .main-div-area .top-selected-users-main-div .all-tags-div span { border-radius: 4px; background: #e0e0e0; padding: 4px 10px; display: flex; align-items: center; gap: 10px; } .main-div-area .top-selected-users-main-div .all-tags-div span svg { cursor: pointer; } .main-div-area .heading { padding: 15px 25px; color: #59544a; font-size: 12px; font-weight: 700; margin: 0; } .main-div-area .users-checkboxes-main-div { margin-top: 15px; overflow-y: auto; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div { display: flex; align-items: center; justify-content: space-between; padding: 6px 25px; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div:hover { background: #efefef; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div { display: flex; align-items: center; gap: 15px; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div { width: 36px; height: 35px; border-radius: 50%; overflow: hidden; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div img { width: 100%; height: 100%; object-fit: cover; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.name { color: #2c2c2c; font-size: 16px; margin: 0; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.address { color: #9da1ac; font-size: 13px; font-weight: 400; margin: 0; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label { width: 31px; height: 31px; border-radius: 50%; background-color: #dcdcdc; display: flex; align-items: center; justify-content: center; cursor: pointer; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label .check { display: inline-block; transform: rotate(45deg); height: 15px; width: 9px; border-bottom: 2.5px solid #fff; border-right: 2.5px solid #fff; margin-bottom: 4px; border-radius: 0.2px; } .main-div-area .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label input:checked ~ label { background: linear-gradient(270deg, #24e01e 0%, #3160c5 100%); } .main-div-area .send-msg-btn { padding: 15px; margin-top: 5px; } .main-div-area .send-msg-btn button { border-radius: 8px; background: var(--gradient, linear-gradient(270deg, #2ebb0a 0%, #3176c5 100%)); height: 50px; border: none; box-shadow: none; outline: none; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-family: "Museo Sans Rounded 400"; font-size: 16px; font-weight: 400; margin-inline: auto; padding-inline: 25px; cursor: pointer; } .main-div-area .send-msg-btn button:hover { background: linear-gradient(270deg, #3176c5 0%, #2ebb0a 100%); }
JS
// Select users to send message start const selectedUsers = document.querySelectorAll('.each-users-checkboxes-div input'); var allTagsDiv = document.querySelector('.all-tags-div'); selectedUsers.forEach(eachSelectedUsers => { eachSelectedUsers.addEventListener('change', function () { var checkBoxAttr = this.getAttribute('data_id'); var userName = this.getAttribute('data-username') // Make name like 'sumit s.' let name = userName var names = name.split(/\s+/); names[1] = names[1].substr(0, 1) + "."; var userName = names.join(' '); if (this.checked == true) { var divtest = document.createElement("span"); divtest.setAttribute("id", "selected_user_" + checkBoxAttr); divtest.setAttribute("tag_id", checkBoxAttr); divtest.setAttribute("class", "chipsArea"); divtest.innerHTML = `${userName} <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" onclick="removeChip(${checkBoxAttr})"><path d="M11.1 10.0002L15.7726 5.32735C16.0758 5.02415 16.0758 4.53218 15.7726 4.22783C15.4694 3.92349 14.9774 3.92463 14.6731 4.22783L10.0002 8.90037L5.32736 4.22783C5.02415 3.92463 4.53218 3.92463 4.22783 4.22783C3.92349 4.53104 3.92462 5.02301 4.22783 5.32735L8.9004 10.0002L4.22783 14.673C3.92462 14.9762 3.92462 15.4682 4.22783 15.7725C4.3793 15.9243 4.57888 16 4.77703 16C4.97632 16 5.17476 15.9243 5.32622 15.7725L10.0002 11.1L14.6731 15.7725C14.8245 15.9243 15.0241 16 15.2223 16C15.4204 16 15.62 15.9243 15.7715 15.7725C16.0747 15.4693 16.0747 14.9773 15.7715 14.673L11.1 10.0002Z" fill="#7B7979">/></svg>` allTagsDiv.appendChild(divtest) } else { document.querySelector('#selected_user_' + checkBoxAttr).remove() } }) }) // Remove chips function removeChip(id) { document.querySelector('.all-tags-div #selected_user_' + id).remove() const checkedInput = document.querySelector('.each-users-checkboxes-div input#user_checkbox_' + id).checked = false; } // Select users to send message end
Copied
// Select users to send message start const selectedUsers = document.querySelectorAll('.each-users-checkboxes-div input'); var allTagsDiv = document.querySelector('.all-tags-div'); selectedUsers.forEach(eachSelectedUsers => { eachSelectedUsers.addEventListener('change', function () { var checkBoxAttr = this.getAttribute('data_id'); var userName = this.getAttribute('data-username') // Make name like 'sumit s.' let name = userName var names = name.split(/\s+/); names[1] = names[1].substr(0, 1) + "."; var userName = names.join(' '); if (this.checked == true) { var divtest = document.createElement("span"); divtest.setAttribute("id", "selected_user_" + checkBoxAttr); divtest.setAttribute("tag_id", checkBoxAttr); divtest.setAttribute("class", "chipsArea"); divtest.innerHTML = `${userName} <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" onclick="removeChip(${checkBoxAttr})"><path d="M11.1 10.0002L15.7726 5.32735C16.0758 5.02415 16.0758 4.53218 15.7726 4.22783C15.4694 3.92349 14.9774 3.92463 14.6731 4.22783L10.0002 8.90037L5.32736 4.22783C5.02415 3.92463 4.53218 3.92463 4.22783 4.22783C3.92349 4.53104 3.92462 5.02301 4.22783 5.32735L8.9004 10.0002L4.22783 14.673C3.92462 14.9762 3.92462 15.4682 4.22783 15.7725C4.3793 15.9243 4.57888 16 4.77703 16C4.97632 16 5.17476 15.9243 5.32622 15.7725L10.0002 11.1L14.6731 15.7725C14.8245 15.9243 15.0241 16 15.2223 16C15.4204 16 15.62 15.9243 15.7715 15.7725C16.0747 15.4693 16.0747 14.9773 15.7715 14.673L11.1 10.0002Z" fill="#7B7979">/></svg>` allTagsDiv.appendChild(divtest) } else { document.querySelector('#selected_user_' + checkBoxAttr).remove() } }) }) // Remove chips function removeChip(id) { document.querySelector('.all-tags-div #selected_user_' + id).remove() const checkedInput = document.querySelector('.each-users-checkboxes-div input#user_checkbox_' + id).checked = false; } // Select users to send message end
Output
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Programming Tutorial
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Python
Server
Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Forms
Popup
Table
HTML Course Code
HTML Entity
↑→ Arrows
$¢ Currency
Aö Letters
%+ Math
1¾ Numbers
&— Punctuation
©™ Symbols
Best Of
Internet
Technology
Health
Travel
Onine Tools
CSS Minifier
Text Converter
Age Calculator
Pincode Details
Whiteboard
PDF to Text
Gradient Generator
PX to REM Converter
REM to PX Converter
PX to EM Converter
EM to PX Converter
WEBP Converter
Latest & Upcoming movies
Bollywood
Hollywood
Tamil
Telgu
Bangla
Web Series