JSFiddle - React, Tailwind, and code Playground

by Vanessa_Li

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Details Demo</title>
        <style type="text/css">
         
        </style>
    </head>
    <body>
        <details>  
            <summary>b3log-solo GAE 博客，奏出你的主音！</summary>  
            <img src="http://code.google.com/p/b3log-solo/logo?cct=1320135437" alt="B3log" />  
            <div>  
                <h3>b3log-solo GAE 博客，奏出你的主音！</h3>  
                <p>
                    <a rel="nofollow" href="http://code.google.com/p/b3log-solo/">B3log Solo</a> 
                    是款开源（<a rel="nofollow" href="http://www.apache.org/licenses/LICENSE-2.0.html">Apache License 2.0</a>）的博客程序，不仅可以运行在 
                    <a rel="nofollow" href="http://code.google.com/appengine">Google App Engine</a> 
                    上，也可以运行在标准 Servlet 容器上。 
                    当前最新版本：
                    <a rel="nofollow" href="http://b3log-solo.googlecode.com/files/b3log-solo-0.3.5.zip">0.3.5</a>。
                <g:plusone source="google:projecthosting" size="medium"></g:plusone>
                <br><br>
                B3log 首页：<a rel="nofollow" href="http://www.b3log.org">http://www.b3log.org</a>，
                社区：<a rel="nofollow" href="http://symphony.b3log.org">http://symphony.b3log.org</a>。
                </p>  
            </div>  
        </details> 
    </body>
</html>

CSS

body { font-family: sans-serif; font-size: 12px}  
            details {  
                overflow: hidden;  
                background: #e3e3e3;  
                margin-bottom: 10px;  
                display: block;  
            }  

            details summary {  
                cursor: pointer;  
                padding: 10px;  
            }  

            details div {  
                float: left;  
                width: 55%;  
                padding: 0 12px 12px 12px;
            }  

            details div h3 { margin-top: 0; }  

            details img {  
                float: left;  
                width: 200px;  
                padding: 0 30px 10px 10px;  
            }