JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html> 
<head>
<title>Prg</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
    pre {width:90%;border:#a0a0c0 1px solid;background:#e8faff;color:black;margin:10px 0 10px 30px;padding:10px;
     white-space: pre-wrap;
     word-wrap: break-word;
}
</style>
</head>
<body>
    <div class="main">
        <input type='file' accept='.txt, .fb2, .pdf, .epub' onchange='openFile(this)'>
    </div> 

<script>
    var openFile = function(target){
        var read = new FileReader();
            read.onload = () => {
                 $('.main').append('<div style="width: 800px;" class = "book">');
                 $('.book').html('<pre>' + read.result + '</pre>');
            }
        read.readAsText(target.files[0]);
    }
</script>
</body>
</html>