JSFiddle - React, Tailwind, and code Playground

by Mehmet Demiray

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<html name="html">
	<body>
		<div id="home" lang="tr">
			<button onclick='changeLangTr()'>
				Change Language TR
			</button>
			<button onclick='changeLangEn()'>
				Change Language EN
			</button>
			<p id="text" lang="tr">
				iürkçe Karakterlerin Kullanımı (iğüşçıâ)
			</p>

		</div>
	</body>
</html>

CSS

p {
	margin-top: 30px;
	font-size: 20px;
	text-transform: uppercase;
}
p#info {
	font-size: 12px;
	color: red;
	margin-top: 0;
}

JavaScript

function changeLangTr() {
	document.getElementById("text").setAttribute("lang","tr")
	getText()
}
function changeLangEn() {
	document.getElementById("text").setAttribute("lang","en")
	getText()
}

function getText() {
	//var node = document.getElementById('text').innerText
	//document.getElementById('text').innerText = node
}