JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<h1>
精靈地圖
</h1>
<p><img alt="" class="img-fluid" height="325" src="https://img-blog.csdn.net/201810122107563?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="625" referrerPolicy="no-referrer"></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        div{
            width: 16px;
            height:  16px;
            background-image: url("https://img-blog.csdn.net/201810122107563?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70");
        }
        /* 從精靈圖片中獲取需要的圖片 */
        .vip3{              /* 獲取vip3 */
            background-position: -24px -48px;
        }
        .vip4{              /* 獲取vip4 */
            background-position: -24px -72px;
        }
        .auth{              /* 獲取微博認證 */
            width: 95px;    /* 微博認證和vip大小不一樣，需單獨指定 */
            height: 35px;
            background-position: -425px -50px; 
        }
    </style>
</head>
<body>
    <!-- 設定三個div顯示 -->
    <div class="vip3"></div>
    <div class="vip4"></div>
    <div class="auth"></div>
</body>
</html>