React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

._card{
  width: 300px;
  height: 230px;
  position: relative;
  overflow: hidden;
  float: left;
}
 
 
._card > .card-container{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  text-align: left;
  margin: auto;
  bottom: 0;
  height: 100%;
  width: 100%;
}
 
._card > .card-container > .card-content{ 
  padding: 16px; 
}
 
._card > .card-container > .card-content > .price{ 
  color: red; 
}

Babel + JSX

class Card extends React.Component {   
  constructor(props) {     
   super(props);     
   this.state = {name: "新標題", price: 100, description: "description"};   
  }   
  handleNameChange(e){ this.setState({name: e.target.value});   } 
  handlePriceChange(e){ this.setState({price: e.target.value});   }   
  handleDescriptionChange(e){this.setState({description: e.target.value});   } 
  render() {  
    return(<div>  
      <div>     
      <p>標題：<input name="product[name]" 
                        placeholder="請輸入標題" type="text" 
                        value={this.state.name} 
                        onChange={this.handleNameChange.bind(this)}/></p>       
              
      <p>價錢：<input min="0" name="product[price]" 
                          placeholder="請輸入價錢" type="number" 
                          value={this.state.price} 
                          onChange={this.handlePriceChange.bind(this)} /></p>
 
      <p>敘述：<textarea name="product[description]" 
                         onChange={this.handleDescriptionChange.bind(this)}  
                         value={this.state.description}></textarea></p>
     </div>
     <div className="_card">           
       <div className="card-container">  
         <div className="card-content">               
           <h3>商品名稱：{this.state.name}</h3>               
           <h4 className="price">商品價格：{this.state.price}</h4>              
           <p>商品敘述：{this.state.description}</p>    
         </div>         
       </div>           
     </div>       
</div>)
}} 
ReactDOM.render(<Card />, document.querySelector("#demo"));