JSFiddle - React, Tailwind, and code Playground

by lazybios

HTML

<figure>
    <img src="https://www.fluentin3months.com/wp-content/uploads/2018/05/hiraganakatakana.png">
    <figcaption></figcaption>
</figure>

<h2>卡包介绍</h2>
<p>
日语的字母叫做假名，每个假名代表一个音节。假名有两种书写方式，即平假名和片假名，平假名用于一般书写，片假名则用于表示外来语和特殊词汇等。如同拼音之余汉语，字母之于英文一样，假名对于所有日语学习者来说都是一个绕不过去的环节。
</p>

<p>
回顾我们当年初学语言之时，重复与记忆可以说是掌握它们的不二法门，这个卡包就是用来帮助你记忆和巩固日语五十音的。卡包中包含  45 个平假名， 50 个片假名，通过反复识记卡片，可以让你在段时间将他们烂熟于心。
</p>

<h2>使用方法</h2>
<p>
  购买卡包后，通过首页进入复习界面，根据自己当前学习情况调整设置复习进度。
</p>

<h2>面向人群</h2>
<ul>
  <li>零起点的日语兴趣爱好者；</li>
  <li>想打好扎实语音基础的日语学习者；</li>
  <li>日语语音有较大问题，需要系统学习语音的学习者。</li>
</ul>

<h2>购买须知</h2>
<ol>
    <li>本卡包为图文+音频形式内容服务，共计 90 张卡片，上线时间为 2018 年 12 月 11 日；</li>
    <li>用户购买卡包后即可永久免费阅读使用卡包中的卡片；</li>
    <li>知识卡片为虚拟内容服务，一经购买成功概不退款；</li>
    <li>知识卡片版权归北京彩橙科技有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；</li>
    <li>在卡片速记使用过程中，如有任何问题，可通过邮件联系 <a target="_blank" href="mailto:[email protected]">[email protected]</a>或关注微信公众号「卡片速记」寻求客服帮助</li>
</ol>

CSS

body {
  font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}

p {
  line-height: 200%;
}

li {
  line-height: 200%;
}