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


<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=>{


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.