<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>The Text Converter</
title
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
class="bg-gray-100 h-screen flex flex-col
items-center justify-center">
<
div
class="max-w-md w-full bg-white p-8
rounded-md shadow-md border
border-green-500">
<
h1
class="text-2xl font-bold text-center
text-gray-800 mb-4">
Text Converter
</
h1
>
<
textarea
id
=
"textInput"
class="w-full h-40 p-4
border border-gray-300
rounded-md resize-none
focus:outline-none focus:ring
focus:ring-blue-400 mb-4">
</
textarea
>
<
div
class
=
"flex justify-center space-x-4"
>
<
button
onclick
=
"convertToUpperCase()"
class="px-6 py-3 bg-blue-500 text-white
rounded-md hover:bg-blue-600
focus:outline-none focus:ring
focus:ring-blue-400">
Upper Case
</
button
>
<
button
onclick
=
"convertToLowerCase()"
class="px-6 py-3 bg-blue-500
text-white rounded-md
hover:bg-blue-600 focus:outline-none
focus:ring focus:ring-blue-400">
Lower Case
</
button
>
<
button
onclick
=
"convertToTitleCase()"
class="px-6 py-3 bg-blue-500 text-white
rounded-md hover:bg-blue-600
focus:outline-none focus:ring
focus:ring-blue-400">
Title Case
</
button
>
<
button
onclick
=
"clearText()"
class="px-6 py-3 bg-red-500 text-white
rounded-md hover:bg-red-600
focus:outline-none focus:ring
focus:ring-red-400">
Clear
</
button
>
</
div
>
<
div
id
=
"output"
class="mt-4 p-4 border
border-gray-300 rounded-md">
</
div
>
</
div
>
<
script
src
=
"script.js"
></
script
>
</
body
>
</
html
>