-
Download CSS
-
Import/link CSS
/*Import React*/
import './style.css';
/*HTML*/
<link rel="stylesheet" href="style.css">
- Add HTML Commands
HTML Commands: /Button
<>
<button class="btn"><span>BUTTON-defult</span></button>
<button class="btn btn-primary"><span>BUTTON-Primary</span></button>
<button class="btn btn-secondary"><span>BUTTON-secondary</span></button>
<button class="btn btn-success"><span>BUTTON-success</span></button>
<button class="btn btn-danger"><span>BUTTON-Primary</span></button>
<button class="btn btn-warning"><span>BUTTON-secondary</span></button>
<button class="btn btn-info"><span>BUTTON-success</span></button>
<button class="btn btn-dark"><span>BUTTON-success</span></button>
<>
HTML Commands: /Button-Edge-Curve
<>
<button class="btn btn-edge-curve"><span>BUTTON-defult</span></button>
<button class="btn btn-edge-curve btn-primary"><span>BUTTON-Primary</span></button>
<button class="btn btn-edge-curve btn-secondary"><span>BUTTON-secondary</span></button>
<button class="btn btn-edge-curve btn-success"><span>BUTTON-success</span></button>
<button class="btn btn-edge-curve btn-danger"><span>BUTTON-Primary</span></button>
<button class="btn btn-edge-curve btn-warning"><span>BUTTON-secondary</span></button>
<button class="btn btn-edge-curve btn-info"><span>BUTTON-success</span></button>
<button class="btn btn-edge-curve btn-dark"><span>BUTTON-success</span></button>
<>
HTML Commands: /Button-Curve
<>
<button class="btn btn-curve"><span>BUTTON-defult</span></button>
<button class="btn btn-curve btn-primary"><span>BUTTON-Primary</span></button>
<button class="btn btn-curve btn-secondary"><span>BUTTON-secondary</span></button>
<button class="btn btn-curve btn-success"><span>BUTTON-success</span></button>
<button class="btn btn-curve btn-danger"><span>BUTTON-Primary</span></button>
<button class="btn btn-curve btn-warning"><span>BUTTON-secondary</span></button>
<button class="btn btn-curve btn-info"><span>BUTTON-success</span></button>
<button class="btn btn-curve btn-dark"><span>BUTTON-success</span></button>
<>
HTML Commands: /Card-Normal
<>
<div class="box" style="width: 30%;">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?</p>
</div>
<>
HTML Commands: /Card-With-Link
<>
<div class="box" style="width: 30%;">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?</p>
<a href="#">Link</a>
</div>
<>
HTML Commands: /Card-With-Button
<>
<div class="box" style="width: 30%;">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?
</p>
<button class="btn btn-edge-curve btn-dark"><span>button</span></button>
</div>
<>
HTML Commands: /Card-With-Button
<>
<div class="box" style="width: 30%;">
<img class="card-img" data-src="image" alt="image" data-holder-rendered="true" src="image.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet voluptates, error dicta natus sint quisquam amet doloremque placeat perferendis?
</p>
<button class="btn btn-edge-curve btn-dark"><span>button</span></button>
</div>
<>
HTML Commands: /Card-Normal
<>
<input type="text" name="inputdata" placeholder="Enter your input"/>
<>