Lyrics Template

<!-- Image --> <table style="border-collapse: collapse; width: 100%;" border="0"> <tbody> <tr> <td style="width: 50%; text-align: center;"> </td> <td style="width: 50%; text-align: center;"> </td> </tr> </tbody> </table> <!-- Headings --> <h2 style="text-align: center;"><span style="color: #444444;">= Lyrics</span></h2><h3 style="text-align: center;"><span style="color: #444444;">Rabindra Sangeet Lyrics</span></h3><div style="text-align: left;"><span style="font-size: medium;">* লিরিক্স</span></div> <!-- CSS --> <style> .tab-container { display: flex; flex-direction: column; width: 100%; border: 1px solid #ddd; margin-top: 10px; text-align: center; } .tab-buttons { display: flex; border-bottom: 1px solid #ddd; } .tab-buttons button { flex: 1; padding: 10px; cursor: pointer; background-color: #fff; border: none; outline: none; text-align: center; font-weight: bold; color: #25a699; } .tab-buttons button.active { border-bottom: 3px solid #25a699; color: #000; } .tab-content { padding: 10px; display: none; position: relative; } .tab-content.active { display: block; } .copy-btn { position: absolute; top: 10px; right: 10px; background-color: #25a699; color: #fff; border: 1px solid #ddd; padding: 5px 10px; cursor: pointer; font-size: 14px; border-radius: 4px; transition: background-color 0.3s ease; } .copy-btn:hover { background-color: #d04917; } </style> <!-- HTML --> <div class="tab-container"> <div class="tab-buttons"> <button class="active" onclick="openTab(event, 'tab1')">Bangla Version</button> <button onclick="openTab(event, 'tab2')">English Version</button> <!-- Add More Tab Here --> </div> <div id="tab1" class="tab-content active"> <button class="copy-btn" onclick="copyContent('tab1')">Copy</button><br> <p> _Tab 1_<br> <br> Line 1.<br> Line 2.<br> Line 3. </p> </div> <div id="tab2" class="tab-content"> <button class="copy-btn" onclick="copyContent('tab2')">Copy</button><br> <p> _Tab 2_<br> <br> Line 1.<br> Line 2.<br> Line 3. </p> </div> <!-- Add More Tab Content Here --> </div> <!-- Javaascript --> <script> function openTab(event, tabName) { var i, tabcontent, tabbuttons; tabcontent = document.getElementsByClassName("tab-content"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tabbuttons = document.getElementsByClassName("tab-buttons")[0].getElementsByTagName("button"); for (i = 0; i < tabbuttons.length; i++) { tabbuttons[i].className = tabbuttons[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; event.currentTarget.className += " active"; } function copyContent(tabId) { var content = document.getElementById(tabId).getElementsByTagName('p')[0].innerHTML; content = content.replace(/<br>/g, "\n"); // Replace <br> with newline var textarea = document.createElement("textarea"); textarea.value = content; document.body.appendChild(textarea); textarea.select(); document.execCommand("copy"); document.body.removeChild(textarea); alert("Content copied to clipboard!"); } </script> <!-- Video -->