React JS setup on CodePen

Hello everyone ,
I have just finished my random quote machine project with React . Yet I am having a problem running it on codepen . I used axios for fetching data from the quotes endpoint but for some reason it’s not giving response .
Here is the pen : https://codepen.io/malekhammou/pen/gOORbNB
Looking forward for your prompt help !

If you look at your browser’s console, you will see you are getting the following error:

spread.js:25 Mixed Content: The page at ‘https://codepen.io/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://quotes.stormconsultancy.co.uk/random.json’. This request has been blocked; the content must be served over HTTPS.

You can not make a request to an insecure url (i.e http) from a secure site (like codepen.io which uses https). You will need to find another source for your quotes, because that site does not appear to have an https equivalent endpoint.

@RandellDawson Thank you for your help ! What about bootstrap and font-awesome ? They are not working properly even though I added them in my settings ! the page should look like this :