<input type="text" placeholder="Text to be spoken" value="The Responsive Voice API is awesome!!!"/>

<div>Speak</div>

<script src="https://code.responsivevoice.org/responsivevoice.js?key=auvTMQpf"></script>
body {
	background: #181927;
}

body * {
	font-family: sans-serif;
}

input, div {
	position: absolute;
	margin: auto;
	height: 50px;
	width: 90%;
	max-width: 30pc; 
	right: 0;
	left: 0;
	top: 0;
	bottom: 50px;
	background: #1F2134;
	outline: none;
	border: 0;
	padding: 10px 20px;
	border-radius: 7px;
	font-size: 20px;
	color: crimson;
}

div {
	height: fit-content;
	width: fit-content;
	bottom: -100px;
	color: #fff;
	background: crimson;
	cursor: pointer;
}

div:hover {
	background: crimson;

}

input::placeholder {
	color: crimson;
}
document.querySelector("div").addEventListener("click", e=>{
	responsiveVoice.speak(document.querySelector("input").value);

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.