Random Quote Machine with React and Bootstrap

Question

For my first solo React exercise project I decided to recreate a quote machine from the example that uses vanilla JS/jQuery. I also used a mix of Bootstrap/plain CSS. I got it to look how I wanted and do what I wanted, but I am not sure if my code follows best practices. All feedback is much appreciated, as I am still quite new to web development.

I also included a link to GitHub repository, where I listed some more specific questions in the README and a React code with a commented out parts which I tried, if you are willing to help out some more:

https://github.com/Ogatron3000/Random-Quote-Machine

React:

React, { Component } from 'react';
import axios from "axios";
class App extends Component {
 state = {
 quotes: [],
 quote: {},
 animation: "jackInTheBox",
 colors: ["primary", "success", "warning", "danger", "info", "dark"],
 color: "primary"
 }
 // get quotes
 componentDidMount() {
 axios.get("https://gist.githubusercontent.com/shreyasminocha/7d5dedafc1fe158f82563c1223855177/raw/325d51aca7165b2498971afcff9bed286a52dc0e/quotes.json")
 .then(res => {
 this.setState({
 quotes: res.data,
 quote: res.data[0]
 })
 })
 }
 // new quote
 handleClick = () => {
 this.setState({
 quote: this.state.quotes[Math.floor(Math.random()*102)],
 animation: "animated jackInTheBox",
 color: this.state.colors[Math.floor(Math.random()*6)]
 })
 }
 render() {
 // assign random quote
 const quote = this.state.quotes.length ? (this.state.quote.quote) : ("Wait o");
 // assign author
 const author = this.state.quotes.length ? (this.state.quote.author) : ("");
 // tweet link
 const tweet = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" 
 + '"' + quote + '" ' + author;
 // tumblr link
 const tumblr = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption="
 + author + "&content=" + quote + "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button";
 return (
 <div className={"App animted fadeIn bg-" + this.state.color}>
 <div id="quote-box" className="card">
 <p id="text" className={"text-center " + this.state.animation + " text-" + this.state.color} key={Math.random()}>
 {quote}
 </p>
 <p id="author" className={"text " + this.state.animation + " text-" + this.state.color} key={Math.random() + 1}>
 - {author}
 </p>
 <div id="buttons">
 <a id="tweet-quote" className="button-link" href={tweet} target="_blank">
 <button className={"btn btn-" + this.state.color}>
 <span className="fa fa-twitter"></span>
 </button>
 </a>
 <a id="tumblr-quote" className="button-link" href={tumblr} target="_blank">
 <button className={"btn btn-" + this.state.color}>
 <span className="fa fa-tumblr"></span>
 </button>
 </a>
 <button id="new-quote" className={"btn btn-" + this.state.color} onClick={this.handleClick}>
 New Quote
 </button>
 </div>
 </div>
 </div>
 );
 }
}
export default App;

CSS:

body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 monospace;
}
.App {
 height: 100vh;
 width: 100vw;
 transition: background 0.4s linear;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
#quote-box{
 padding: 40px;
 width: 500px;
 min-width: 500px;
}
#text{
 width: 100%;
 font-size: 32px;
 margin-bottom: 0;
}
#author{
 display: flex;
 justify-content: end;
 margin-bottom: 30px;
}
#buttons{
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 grid-gap: 10px;
}
#new-quote{
 grid-column: 3 / 13;
 justify-self: end;
}
.button-link button{
 width: 40px;
}
.btn{
 transition: background 0.4s linear;
 border: none;
 color: white;
}
.btn:focus{
 box-shadow: none !important;
 outline-style: none !important;
 color:white !important;
}
.btn:hover{
 color: white;
}

Thank you for your time!