JSFiddle - React, Tailwind, and code Playground

by kazekaze

HTML

<button class="INTRO" onclick="myFunction02()">認識工廠</button>

<hr class="style-one" />

<!---<input id="NAME" type="text" onsubmit=BUY() placeholder="輸入用戶姓名"/>-->
<input id="NAME" type="text" placeholder="輸入用戶姓名"/>
<button class="BUY" onclick="BUY()">我要訂購</button>

CSS

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}


#NAME{
    width: 120px;
    height: 50px;
    cursor:pointer;
    border-radius: 0.5rem;
    font-size: 18px;    
}


.BUY{    
    #position: absolute;
    width: 120px;
    height: 50px;
    #left: 150px;
    #top: 100px;
   
    border-radius: 0.5rem;
    font-size: 22px;
    text-align: center;
    
    background-color: white;
    color: black;
    border: 2px solid #4CAF50;    
    
    cursor:pointer;
}


.BUY:hover{
background-color: #00cc66;
}


.INTRO{    
    #position: absolute;

    width: 120px;
    height: 50px;
    #left: 150px;
    #top: 200px;
   
    border-radius: 0.5rem;
    font-size: 22px;
    text-align: center;
    
    background-color: white;
    color: black;
    border: 2px solid blue;    
  
    cursor:pointer;
}


.INTRO:hover{
background-color: #6699ff;
}

JavaScript

function BUY()
{
  var Greeting="先生/小姐您好！謝謝您對我們的衣服有興趣！請致電 0987-654-321，會有專人提供您報價！";
  var str = document.getElementById('NAME').value;
  alert(str+Greeting);  
}

function myFunction02()
{
  alert('我們工廠位於新北市，通過國際 ISO9001 認證，品質讓您放心！');
}

/*
  alert('你點擊了按鈕！');
  var message = '你點擊了按鈕！';
	alert(message);
	var text1 = '恭喜';
	var text2 = '發財';
	alert(text1 + text2);
	alert('萬事' + '如意');
 */