JSFiddle - React, Tailwind, and code Playground

by dynamis

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>テスト</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    </head>
    <body>
    
    <a href="#" class="button" onclick="document.getElementById('message').innerHTML = 'タップしたよ！！'; setTimeout(function() { document.getElementById('message').innerHTML = ''; }, 2000);"><div>リンクのタイトル</div></a>
    <br />
    <a href="#" onclick="document.getElementById('message').innerHTML = 'タップしたよ！！'; setTimeout(function() { document.getElementById('message').innerHTML = ''; }, 2000);">リンクのタイトル</a>

    <div id="anime-area">
        <img src="https://www.google.co.jp/logos/2012/muybridge12-hp-v.png" />
        <p>画像をtranslate3dを使って50px移動</p>
    </div>

    <a href="#" class="button" onclick="document.getElementById('message').innerHTML = 'タップしたよ！！'; setTimeout(function() { document.getElementById('message').innerHTML = ''; }, 2000);"><div>リンクのタイトル</div></a>
    <br />
    <a href="#" onclick="document.getElementById('message').innerHTML = 'タップしたよ！！'; setTimeout(function() { document.getElementById('message').innerHTML = ''; }, 2000);">リンクのタイトル</a>
    
    <div id="message"></div>

    </body>
</html>

CSS

.button {
                position: relative;
                display: block;
                text-decoration: none;
                background: url(arrow.png) no-repeat right center;
                color: #333;
            }
            .button > div {
                border-radius: 5px;
                border: 1px solid #ccc;
                padding: 10px;
            }
            
            #message {
                margin: 20px 10px;
                height: 40px;
            }
            
            #anime-area {
                position: relative;
                margin: 30px 0;
                width: 300px;
                padding-top: 100px;
            }
            
            #anime-area img {
                position: absolute;
                left: 0;
                top: 0;
                width: 300px;
                -webkit-transform: translate3d(100px, 0, 0);
                -moz-transform: translate3d(100px, 0, 0);
                transform: translate3d(100px, 0, 0);
            }