JSFiddle - React, Tailwind, and code Playground

by sulfureous

HTML

<section class="german">
    <img src="http://dummyimage.com/50x60/333/fff">
    <section class="german-content">
        <p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it <a href="projects/german/">here</a> (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
    </section>
</section>
    
<section class="chembond">
    <img src="http://dummyimage.com/50x60/333/fff">
    <section class="chembond-content">
        <p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend <a href="ejayc.co.uk">Elliott</a> who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click <a href="projects/bonding/">here.</a> I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
    </section>
</section>

CSS

.german img {
    height: 100;
    width: 100;
    padding: 2px 2px 1px 2px;
}
.german img:hover {
    border-radius: 10px;
}
.german-content {
    display: none;
    float: right;
    width: 400px;
}
.german:hover .german-content {
    display: inline-block;
    border: 1px solid #999;
    padding: 10px;
    position: absolute;
    top: 20px;
    right: 20px;
}
.german-content p {
    font-size: 15px;
    font-weight: normal;
}
.chembond img {
    height: 100;
    width: 100;
    padding: 2px 2px 1px 2px;
}
.chembond img:hover {
    border-radius: 10px;
}
.chembond-content {
    display: none;
    float: right;
    width: 400px;
}
.chembond:hover .chembond-content {
    display: inline-block;
    border: 1px solid #999;
    padding: 10px;
    position: absolute;
    top: 20px;
    right: 20px;
}
.chembond-content p {
    font-size: 15px;
    font-weight: normal;
}